javascript - 如何在动画 amcharts 饼图中显示月份？

Question

我正在为 amchart 时间线饼图制作动画，目前正试图让它显示月份和日期，而不仅仅是几天，因为我有很多数据，而“第 132 天”并不是说明它的最佳方式。

有没有一种简单的方法可以使用 amcharts 本身或者只是 js？我尝试使用“ If currentDay>=32 && currentDay<60 ”类型参数的列表来定义月份，但这没有用，即使有，我相信这不是最有效的方法。不幸的是，这里的预览不起作用，因为我有太多的代码/数据无法放在这里，所以我将链接一个 jsfiddle。

https://jsfiddle.net/ca18nzk1/

谢谢 ！:)

<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/animate/animate.min.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>


<script>

var chartData = {
  "1": [
{ "sector": "Subnautica", "size":0 },
{ "sector": "DD", "size":0 },
{ "sector": "KCD", "size":0 },
{ "sector": "ITB", "size":0 },
{ "sector": "Hacktag", "size":0 },
{ "sector": "FFXV", "size":0 },
{ "sector": "Simulacra", "size":0 },
{ "sector": "FC5", "size":0 },
{ "sector": "TAB", "size":0 },
{ "sector": "Rockband", "size":0 },
{ "sector": "Spy Party", "size":0 },
{ "sector": "Dota 2", "size":0 },
{ "sector": "Frostpunk", "size":0 },
{ "sector": "MHW", "size":0 },
{ "sector": "Darkwood", "size":2.27 },
{ "sector": "PoE 2", "size":0 } ],

// (...) more data, 130 entries actually ^^

"132": [
{ "sector": "Subnautica", "size":42.55 },
{ "sector": "DD", "size":41.22 },
{ "sector": "KCD", "size":10.55 },
{ "sector": "ITB", "size":10.43 },
{ "sector": "Hacktag", "size":2.15 },
{ "sector": "FFXV", "size":28.64 },
{ "sector": "Simulacra", "size":6.18 },
{ "sector": "FC5", "size":10.18 },
{ "sector": "TAB", "size":24.22 },
{ "sector": "Rockband", "size":4.62 },
{ "sector": "Spy Party", "size":3.32 },
{ "sector": "Dota 2", "size":7.95 },
{ "sector": "Frostpunk", "size":17.42 },
{ "sector": "MHW", "size":6.15 },
{ "sector": "Darkwood", "size":13.51 },
{ "sector": "PoE 2", "size":17.42 } ]


};

/**
 * Create the chart
 */
var currentYear = 1;
var chart = AmCharts.makeChart( "chartdiv6", {
  "type": "pie",
  "theme": "dark",
  "dataProvider": [],
  "valueField": "size",
  "titleField": "sector",
  "startDuration": 0,
  "innerRadius": 80,
  "pullOutRadius": 20,
  "outlineColor": "#FDB515",
  "marginTop": 30,
  "titles": [{
    "text": "Odd's stream games"
  }],
  "allLabels": [{
    "y": "54%",
    "align": "center",
    "size": 25,
    "bold": true,
    "text": "1995",
    "color": "#bb0a0c"
  }, {
    "y": "49%",
    "align": "center",
    "size": 15,
    "text": "Day",
    "color": "#bb0a0c"
  }],
  "listeners": [ {
    "event": "init",
    "method": function( e ) {
      var chart = e.chart;

      function getCurrentData() {
        var data = chartData[currentYear];
        currentYear++;
        if (currentYear > 132)
          currentYear = 132;
        return data;
      }

      function loop() {
        chart.allLabels[0].text = currentYear;
        var data = getCurrentData();
        chart.animateData( data, {
          duration: 350,
          complete: function() {
            setTimeout( loop, 650 );
          }
        } );
      }

      loop();
    }
  } ],
   "export": {
   "enabled": false
  }
} );
</script>

<div id="chartdiv6" style="width: 40%; height: 500px; background-color: #1a1a1a;" ></div>

标签： javascripthtmlanimationchartsamcharts

Answer 1

AmCharts 没有针对这种情况的内置解决方案，尤其是在饼图中，因此您必须自己想出一些东西。根据您的需求/准确性，您可以将当前日期划分/修改为月/日，而不是像您建议的那样做一个 ifs 列表，或者您可以使用MomentJS 之类的东西将您的一年中的一天值转换为实际日期获取月份和日期，例如：

  function loop() {
    formatText(chart, currentYear); //consider renaming the currentYear variable since it refers to days.
    // ... omitted ...
  }

  function formatText(chart, day) {
    var date = moment(day, "DDD");//turn day of year into a date
    chart.allLabels[1].text = date.format("MMMM"); //get the full month name and set it to the top label
    chart.allLabels[0].text = date.format("Do"); //get date with ordinal and set it to the bottom
  }

更新的小提琴