javascript - 如何将数据集成到样条图 | 海图

Question

我对 Highcarts 很陌生，我正在尝试使用库实现spline带有两条曲线的图表。Highcharts

第一条曲线代表Today数据，第二条曲线代表Past 7 days.

xAxis 类别是['Mon', 'Tue', 'Wed', 'Th', 'Fri', 'Sat', 'Sun'] yXai 是 10 到 150 之间的数据。

我将提供一个非常具体的示例，以便任何人都可以轻松理解它是如何工作的。我想了解数据（日期和值）如何Today与Past 7 daysxAxis 和 yAxis 集成。

jsfiddle：https ://jsfiddle.net/36pv4fjs/53/

下面是图表配置：

{
        chart: {
            type: 'spline',
        },
        xAxis: {
            labels: {
                enabled: true
            },
            categories: ['Mon', 'Tue', 'Wed', 'Th', 'Fri', 'Sat', 'Sun']
        },
        plotOptions: {
            series: {
                marker: {
                    enabled: false
                }
            }
        },
        series:
            [
                {
                    name: 'Today',
                    data: todayData
                },
                {
                    name: 'Past 7 days',
                    data: past7dats,
                    color: 'lightgreen'
                }
            ]
    }

今天的数据是：（所有的时间日期都是不变的）

[
    {"time":"2020-10-12T00:00:00+03:00","value":12},
    {"time":"2020-10-12T00:15:00+03:00","value":13},
    {"time":"2020-10-12T00:30:00+03:00","value":20},
    {"time":"2020-10-12T00:45:00+03:00","value":25},
    {"time":"2020-10-12T01:00:00+03:00","value":20},
    {"time":"2020-10-12T01:15:00+03:00","value":30},
    {"time":"2020-10-12T01:30:00+03:00","value":20},
    {"time":"2020-10-12T01:45:00+03:00","value":25},
    {"time":"2020-10-12T02:00:00+03:00","value":30},
    {"time":"2020-10-12T02:15:00+03:00","value":40},
    {"time":"2020-10-12T02:15:00+03:00","value":20},
    {"time":"2020-10-12T02:15:00+03:00","value":35}
]

过去 7 天的数据为：（时间日期为过去 7 天）

[
    {"time":"2020-10-12T00:00:00+03:00","value":35},
    {"time":"2020-10-11T00:15:00+03:00","value":30},
    {"time":"2020-10-10T00:30:00+03:00","value":20},
    {"time":"2020-10-09T01:00:00+03:00","value":25},
    {"time":"2020-10-08T01:15:00+03:00","value":30},
    {"time":"2020-10-07T01:30:00+03:00","value":40},
    {"time":"2020-10-06T00:45:00+03:00","value":35},

]

标签： javascripthighchartsspline