高圖：使用JSON數據創建多個系列

Question

我正在嘗試使用JSON數據創建line, spline圖。 我想要多個系列，但是我對如何做到這一點感到困惑。 現在，我可以用一個系列創建一個，但是這個系列看起來也不正確。 另外，我也看不到任何傳說。 請幫助我如何解決此問題。 現在我只有starts的代碼。 我也想completes我的圖表。 我要傳說說start和complete

JSON數據：

[
{
    "date": "2019-07-07",
    "starts": 42,
    "completes": 142
},
{
    "date": "2019-07-08",
    "starts": 2,
    "completes": 90
},
{
    "date": "2019-07-09",
    "starts": 28,
    "completes": 175
}
]

我的代碼：

<div id="container"></div>

let theAPI = `the json file`

$.getJSON(theAPI, result => {
    let main_chart_data = [];

    result.forEach((d, i) => {
        let date_chart = new Date(d.date);
        main_chart_data.push([date_chart, d.starts, ]);
    });

    let main_chart_options = buildChart({
        chart_type: 'spline',
        height: 265
    });
    main_chart_options.legend.enabled = false;
    main_chart_options.lang = {
        'noData': 'There is currently no data available.'
    };
    main_chart_options.series = [{
        data: main_chart_data
    }];

    main_chart_options.tooltip = {
        formatter: function() {
            let tooltip = `
      <span style="font-weight:500;">${moment(this.x).format('MMM DD - ha')}</span>
      <br />
      <span>${addCommas(this.y)}</span>
    `;
            return tooltip;
        },
        useHTML: true
    }

    new Highcharts.chart('container', main_chart_options);

    let total_pvs = result.reduce((a, c) => {
        return a += c.starts;
    }, 0);

})

這是我現在的結果：

花鍵-高圖

Answer 1

您可以通過將JSON數據分成兩個獨立的系列來實現它，如下所示：

[{
  "name": "starts",
  "data": [{
    "x": 1562457600000, // date in milliseconds
    "y": 42
  }, {
    "x": 1562544000000,
    "y": 2
  }, {
    "x": 1562630400000,
    "y": 28
  }]
}, {
  "name": "completes",
  "data": [{
    "x": 1562457600000,
    "y": 142
  }, {
    "x": 1562544000000,
    "y": 90
  }, {
    "x": 1562630400000,
    "y": 175
  }]
}]

查看此演示以了解如何制作：

• https://jsfiddle.net/BlackLabel/tjLvh89b/