在AnyChart太阳图表中动画startAngle。

huangapple
go评论115阅读模式
英文:

Animate startAngle in anychart sunburst chart

问题

如何在Anychart旭日图中实现起始角度的动画效果。以下是我的代码：

  1. this.chart = anychart.sunburst(data, "as-tree");
  3. this.chart.container(this.container.nativeElement);
  5. this.chartDraw();
  7. this.pointSelectChart();
  9. this.pointHoverChart();
  11. this.mouseDownChart();
  13. this.chart.level(2).labels().position("circular");
  14. this.chart.level(2).labels().hAlign("center");
  15. this.chart.labels().useHtml(true);
  16. this.chart
  17.   .level(2)
  18.   .labels()
  19.   .format(
  20.     "<span style='font-size:14px; word-break: break-word'>{%name}</span>"
  21.   );
  22. this.chart
  23.   .level(1)
  24.   .labels()
  25.   .format("<span style='font-size:20px'>{%name}</span>");
  26. this.chart
  27.   .level(0)
  28.   .labels()
  29.   .format(
  30.     "<span style='font-size:18px; text-transform: uppercase'>SUSTAINABILITY</span><br><span style='font-size:18px; text-transform: uppercase'>AT THE LME</span>"
  31.   );
  32. this.chart.interactivity().selectionMode("single-select");
  33. this.chart.normal();
  34. this.chart.startAngle(320);
  35. this.chart.contextMenu(false);
  36. this.chart.draw();
  37. this.generateDisclosureTable(
  38.   data[0].children[0].name,
  39.   "theme",
  40.   data[0].children[0].fill,
  41.   data[0].children[0].backgroundColor,
  42.   data[0].children[0].fontColor
  43. );

在叶子节点上单击时，我尝试对startAngle进行动画处理。

Anychart似乎没有在旭日图上提供任何动画函数。我们如何才能实现这个效果呢？

英文:

How can we animate the startangle in Anychart sunburst chart. Below is my code:

  1. this.chart = anychart.sunburst(data, &quot;as-tree&quot;);
  3. this.chart.container(this.container.nativeElement);
  5. this.chartDraw();
  7. this.pointSelectChart();
  9. this.pointHoverChart();
  11. this.mouseDownChart();
  13. this.chart.level(2).labels().position(&quot;circular&quot;);
  14. this.chart.level(2).labels().hAlign(&quot;center&quot;);
  15. this.chart.labels().useHtml(true);
  16. this.chart
  17.   .level(2)
  18.   .labels()
  19.   .format(
  20.     &quot;&lt;span style=&#39;font-size:14px; word-break: break-word&#39;&gt;{%name}&lt;/span&gt;&quot;
  21.   );
  22. this.chart
  23.   .level(1)
  24.   .labels()
  25.   .format(&quot;&lt;span style=&#39;font-size:20px&#39;&gt;{%name}&lt;/span&gt;&quot;);
  26. this.chart
  27.   .level(0)
  28.   .labels()
  29.   .format(
  30.     &quot;&lt;span style=&#39;font-size:18px; text-transform: uppercase;&#39;&gt;SUSTAINABILITY&lt;/span&gt;&lt;br&gt;&lt;span style=&#39;font-size:18px; ; text-transform: uppercase;&#39;&gt;AT THE LME&lt;/span&gt;&quot;
  31.   );
  32. this.chart.interactivity().selectionMode(&quot;single-select&quot;);
  33. this.chart.normal();
  34. this.chart.startAngle(320);
  35. this.chart.contextMenu(false);
  36. this.chart.draw();
  37. this.generateDisclosureTable(
  38.   data[0].children[0].name,
  39.   &quot;theme&quot;,
  40.   data[0].children[0].fill,
  41.   data[0].children[0].backgroundColor,
  42.   data[0].children[0].fontColor
  43. );

onclick of leaves I am trying to animate the startAngle.

Anychart doesn't seem to provide any animate function on sunburst chart. How could we go about to achieve this.

答案1

得分: 1

太阳图表默认情况下没有动画效果。

要创建动画效果，您可以使用 startAngle 方法并自定义函数。您可以在文档中找到有关 Sunburst startAngle 的更多信息。

我们已经准备了两个演示示例，涵盖不同的用例：

第一个演示示例展示了如何通过拖动滑块动态更改图表的角度。

// 获取滑块的DOM元素
var slider = document.getElementById("startAngleSlider")
...
...
// 通过滑块更改图表起始角度
slider.addEventListener("input", function(e){
chart.startAngle(slider.value)
})

第二个演示示例展示了如何通过点击动态更改图表的角度。

// 更新起始角度的函数
var updateStartAngle = function (endAngle)
{
// 设置更新起始角度的定时器
setTimeout(function ()
{
// 检查是否需要更新角度
if (endAngle > 0)
{
// 将图表角度增加5个单位
chart.startAngle(chart.startAngle() + 5);
// 以5个单位的差值递归调用更新函数
updateStartAngle(endAngle-5);
}
}, 5)
}

chart.listen("mouseDown", function(){
updateStartAngle(90);
})

但是，对于包含大量数据集的图表，使用这种方法可能会导致性能问题。

英文:

The sunburst chart has no animations out of the box.

To create an effect of an animation, you may utilize custom functions with the startAngle method.
You can find more information about the Sunburst startAngle in the documentation.

We have prepared 2 demos with different use cases:

The first demo shows how to dynamically change an angle of a chart by dragging the slider.

  1. //get slider DOM element
  2. var slider = document.getElementById(&quot;startAngleSlider&quot;)
  3. ...
  4. ...
  5. //change chart start angle by slider
  6. slider.addEventListener(&quot;input&quot;, function(e){
  7. chart.startAngle(slider.value)
  8. })

The second demo shows how to dynamically change an angle of a chart by clicking.

  1.   //update a start angle
  2.   var updateStartAngle = function (endAngle)
  3.    {    
  4.   //set timeout for updating start angle
  5.   setTimeout(function ()
  6.   {
  7.   	//check if there is a need to update an angle
  8. 	if (endAngle &gt; 0)
  9. 	{
  10.       	//update the chart by 5 angles
  11. 		chart.startAngle(chart.startAngle() + 5);
  12.       	//recursive call of an update function with 5 angles less goal
  13. 		updateStartAngle(endAngle-5);
  14. 	}
  15.   }, 5)}
  17.  chart.listen(&quot;mouseDown&quot;, function(){
  18.  updateStartAngle(90);
  19.  })

However, charts with massive data sets may cause performance issues with this approach.

huangapple
  • 本文由 发表于 2023年6月15日 13:55:37
  • 转载请务必保留本文链接：https://go.coder-hub.com/76479487.html
  • angular
  • anychart
  • javascript
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定