Highcharts：使用 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);

})

这是我现在的结果：

Spline - Highchart

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/

Highcharts：使用 JSON 数据创建多个系列

Highcharts: create multiple series using JSON data

javascript

jquery

json

spline

highcharts