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

Question

我正在制作 amchart 时间线饼图的动画，目前正试图让它显示月份和日期，而不是仅仅显示几天，因为我有很多数据，而且 "day 132" 不是最好的方法来说明一下。

是否有一种简单的方法可以使用 amcharts 本身或仅使用 js 来做到这一点？我尝试使用“ If currentDay>=32 && currentDay<60 ”类型的参数列表来定义月份，但这没有用，即使有，我也确信这不是最有效的方法。不幸的是，此处的预览无法使用，因为我有太多 code/data 无法将此图表放在这里，所以我将 link 一个 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>

Answer 1

AmCharts 没有针对这种情况的内置解决方案，尤其是在饼图中，因此您必须自己想出一些办法。根据您的 needs/accuracy，您可以将当天 divide/mod 变成 months/days，而不是像您建议的那样做一个 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
  }

Updated fiddle

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

How to display months in an animated amcharts pie chart?

html

javascript

charts

animation

amcharts