将嵌套的JSON数据加载到甘特图

时间:2019-07-10 15:47:40

标签: javascript amcharts amcharts4

我目前正在升级的过程中,将我的amCharts从V3迁移到V4(我希望我还没有开始!)-我面临的众多问题之一就是试图创建一个带有JSON数据的甘特图。

使用V3库执行此操作没有问题,但是对于我一生来说,我无法全神贯注于版本4配置。

这是我使用V3加载数据的方式(没有任何问题):

var chart_today = new Date();
var chart_month = chart_today.getMonth() + 1;
var chart_day = chart_today.getDate();
if (chart_month < 10) chart_month = '0' + chart_month;
if (chart_day < 10) chart_day = '0' + chart_day;

$('.ganttdiv').each(function(obj) {
  var chart = AmCharts.makeChart(obj, {
    "type": "gantt",
    "theme": "light",
    "responsive": {
      "enabled": true
    },
    "marginRight": 70,
    "period": "mm",
    "precision": -1,
    "dataDateFormat": "YYYY-MM-DD",
    "columnWidth": 0.5,
    "valueAxis": {
      "type": "date"
    },
    "graph": {
      "fillAlphas": 1
    },
    "rotate": true,
    "categoryField": "category",
    "segmentsField": "segments",
    "colorField": "color",
    "startDate": chart_today.getFullYear() + "-" + chart_month + "-" + chart_day,
    "startField": "start",
    "endField": "end",
    "durationField": "duration",
    "dataLoader": {
      "url": "https://api.myjson.com/bins/zkhs3",
      "async": true,
      "reload": 300
    },
    "valueScrollbar": {
      "autoGridCount": true
    },
    "chartCursor": {
      "cursorColor": "#55bb76",
      "valueBalloonsEnabled": false,
      "cursorAlpha": 0,
      "valueLineAlpha": 0.5,
      "valueLineBalloonEnabled": true,
      "valueLineEnabled": true,
      "zoomable": false,
      "valueZoomable": true
    },
  });
});

我正在尝试重新创建相同的甘特图-为了显示数据,我已经摆脱了风风雨雨,但是我并不高兴。

Link to CodePen with latest attempt

任何建议将不胜感激! -此外,重命名该问题的任何建议都将是一个奖励:P

0 个答案:

没有答案