如何从API获取动态数据以呈现融合甘特图

时间:2020-10-22 12:47:07

标签: javascript dynamic visualization fusioncharts gantt-chart

在这里,我想绘制一个动态融合甘特图。在下面的示例中,我对数据进行了硬编码以呈现图表。但是我需要一种动态格式。我的数据来自API,那么如何获取数据并动态传递呢?

我还希望x轴和y轴采用动态格式。

     FusionCharts.ready(function() {
  var smoPlan = new FusionCharts({
    type: 'gantt',
    renderAt: 'chart-container',
    width: '750',
    height: '300',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "theme": "fusion",
        "dateformat": "mm/dd/yyyy",
        "caption": " ",
        "captionFontSize": "14",
        "subCaption": "Project Plan",
        "subCaptionFontSize": "12",
        "milestoneFont": "Times New Roman",
        "milestoneFontSize": "15"
      },
      "categories": [{
        "category": [{
          "start": "08/01/2014",
          "end": "08/31/2014",
          "label": "Aug '14"
        }, {
          "start": "09/01/2014",
          "end": "09/30/2014",
          "label": "Sep '14"
        }, {
          "start": "10/01/2014",
          "end": "10/31/2014",
          "label": "Oct '14"
        }]
      }],
      "processes": {
        "fontsize": "12",
        "isbold": "1",
        "align": "left",
        "process": [{
          "label": "Identify Customers"
        }, {
          "label": "Survey 500 Customers"
        }, {
          "label": "Interpret Requirements"
        }
       ]
      },
      "tasks": {
        "task": [{
          "id": "1",
          "start": "08/04/2014",
          "end": "08/10/2014"
        }, {
          "id": "2",
          "start": "08/08/2014",
          "end": "08/19/2014"
        }, {
          "id": "3",
          "start": "08/19/2014",
          "end": "09/02/2014"
        }]
      },
      //Adding milestones to task with id 1 and 3
      "milestones": {
        "milestone": [{
          "date": "8/06/2014",
          "taskid": "1",
          "color": "#f8bd19",
          "shape": "rhombus",
          "tooltext": "Successful Completion of Development",
          "label": " ",
          "color": "#587B17"
        }, {
          "date": "8/25/2014",
          "taskid": "3",
          "color": "#f8bd19",
          "shape": "triangle",
          "tooltext": "Successful Completion of Campaign",
          "label": " ",
          "color": "#4838D2"
        }]
      }


    }
  }).render();
});

请帮助我解决这个问题!预先感谢。

0 个答案:

没有答案