javascript 在任意图表中设置startAngle动画

2g32fytz 于 2023-06-28 发布在 Java

关注(0)|答案(1)|浏览(80)

我们如何在Anychart朝阳图中动画星形。下面是我的代码：

this.chart = anychart.sunburst(data, "as-tree");

this.chart.container(this.container.nativeElement);

this.chartDraw();

this.pointSelectChart();

this.pointHoverChart();

this.mouseDownChart();

this.chart.level(2).labels().position("circular");
this.chart.level(2).labels().hAlign("center");
this.chart.labels().useHtml(true);
this.chart
  .level(2)
  .labels()
  .format(
    "<span style='font-size:14px; word-break: break-word'>{%name}</span>"
  );
this.chart
  .level(1)
  .labels()
  .format("<span style='font-size:20px'>{%name}</span>");
this.chart
  .level(0)
  .labels()
  .format(
    "<span style='font-size:18px; text-transform: uppercase;'>SUSTAINABILITY</span><br><span style='font-size:18px; ; text-transform: uppercase;'>AT THE LME</span>"
  );
this.chart.interactivity().selectionMode("single-select");
this.chart.normal();
this.chart.startAngle(320);
this.chart.contextMenu(false);
this.chart.draw();
this.generateDisclosureTable(
  data[0].children[0].name,
  "theme",
  data[0].children[0].fill,
  data[0].children[0].backgroundColor,
  data[0].children[0].fontColor
);

onclick of leaves我正在尝试设置startAngle的动画。
Anychart似乎不提供任何动画功能的朝阳图。我们怎样才能做到这一点呢？

JavaScript

来源：https://stackoverflow.com/questions/76479487/animate-startangle-in-anychart-sunburst-chart

1条答案

按热度按时间

t40tm48m1#

朝阳图表没有开箱即用的动画。
要创建动画效果，可以使用startAngle方法的自定义函数。您可以在文档中找到有关朝阳startAngle的更多信息。
我们准备了两个不同用例的演示：
第一个演示显示了how to dynamically change an angle of a chart by dragging the slider。

//get slider DOM element
var slider = document.getElementById("startAngleSlider")
...
...
//change chart start angle by slider
slider.addEventListener("input", function(e){
chart.startAngle(slider.value)
})

第二个演示显示了how to dynamically change an angle of a chart by clicking。

//update a start angle
  var updateStartAngle = function (endAngle)
   {    
  //set timeout for updating start angle
  setTimeout(function ()
  {
    //check if there is a need to update an angle
    if (endAngle > 0)
    {
        //update the chart by 5 angles
        chart.startAngle(chart.startAngle() + 5);
        //recursive call of an update function with 5 angles less goal
        updateStartAngle(endAngle-5);
    }
  }, 5)}

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

但是，具有大量数据集的图表可能会导致这种方法的性能问题。

赞(0）回复(0）举报 2023-06-28

我来回答

javascript 在任意图表中设置startAngle动画

1条答案

相关问题

热门标签

最新问答