Как отобразить месяцы на анимированной круговой диаграмме amcharts? - PullRequest
Новая
       20

Как отобразить месяцы на анимированной круговой диаграмме amcharts?

0 голосов
/ 13 мая 2018

Я анимирую круговую диаграмму временной шкалы amchart и сейчас пытаюсь заставить ее отображать месяцы и дни, а не просто дни, поскольку у меня много данных, и «день 132» не лучший способ проиллюстрировать это .

Есть ли простой способ сделать это с помощью amcharts или просто с помощью js? Я попытался с помощью списка аргументов типа «If currentDay> = 32 && currentDay <60» определить месяцы, но это не сработало, и даже если бы оно имело место, я уверен, что это не самый эффективный способ сделать это. К сожалению, предварительный просмотр здесь не сработает, потому что у меня слишком много кода / данных для этой диаграммы, чтобы поместить его сюда, поэтому я привяжу jsfiddle. </p>

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 Ответ

0 голосов
/ 14 мая 2018

AmCharts не имеет встроенного решения для этого случая, особенно в виде круговой диаграммы, поэтому вам нужно придумать что-то самостоятельно.В зависимости от ваших потребностей / точности, вы можете просто разделить / изменить текущий день на месяцы / дни вместо того, чтобы делать список предложений, как вы предлагали, или вы можете использовать что-то вроде 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
  }

Обновленная скрипка

...