问如何在动画图表饼图中显示月份？
EN

Stack Overflow用户

提问于 2018-05-13 08:00:51

回答 1查看 262关注 0票数 0

我正在绘制一个动态时间线饼图，目前正试图让它显示几个月和几天，而不是仅仅几天，因为我有很多数据，而“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>

charts

amcharts

javascript

html

animation

1元体验云点播

覆盖建站/短视频等热门场景，提供媒资管理、短视频 SDK、小程序插件和播放器云+端一体化能力，助您抓住视频风口

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-05-13 13: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
  }