如何在動畫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> 

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
  }

更新的小提琴