如何在动画图表饼图中显示月份？
如何在动画图表饼图中显示月份？
提问于 2018-05-13 16:00:51
我正在绘制一个动态时间线饼图，目前正试图让它显示几个月和几天，而不是仅仅几天，因为我有很多数据，而“132天”并不是最好的说明方法。
是否有一种简单的方法可以通过自动图表或者仅仅是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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-13 21:09:10
对于这种情况，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
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50318003
复制相关文章
相似问题
腾讯云开发者
