javascript - 如何在 highcharts 中使用系列数据绘制折线图？

Question

我正在尝试使用 Highcharts 和导航控件创建折线图，但在我的示例中我只能看到点。请帮忙

我的图表选项

$('#container').highcharts('StockChart', {
    chart: {
        defaultSeriesType: 'line'
    },
    rangeSelector: {
        selected: 1
    },
    plotOptions: {
        line: {
            lineWidth: 10,
            marker: {
                enabled: true
            },
            dataLabels: {
                enabled: true,
                borderRadius: 5,
                borderWidth: 1,
                y: -6,
                formatter: function () {
                    return this.series.name;
                }
            },
            states: {
                hover: {
                    lineWidth: 10
                }
            }
        },
        series: {
            cursor: 'pointer'
        }
    },
    tooltip: {
        shared: false,
        formatter: function () {
            var str = '';
            str += 'Task: ' + this.series.name + '<br>';
            str += 'Start Time: ' + this.point.start_time + '<br>';
            str += 'End Time: ' + this.point.end_time + '<br>';
            str += 'Throughput: ' + this.point.y + '<br>';
            return str;
        }
    },
    series: series
});

更新

Jsfiddle link

Answer 1

问题是您实际上正在为每个数据点创建一个新系列。因此，目前您实际上有 4 条线，每条线上有一个点。这就是为什么您看不到任何线条(因为线条需要 2 个或更多点)。

您需要做的是创建一个包含多个数据点的系列。像这样的事情:

var series = [{
    "name": "Territory_Out",
        "data": [{
        "x": 1147651200000,
            "y": 33.1,
            "start_time": "14-05-2006 00:00:00",
            "end_time": "15-05-2006 00:00:00"
    }, {
        "x": 1147737600000,
            "y": 450,
            "start_time": "15-05-2006 00:00:00",
            "end_time": "16-05-2006 00:00:00"
    }, {
        "x": 1147737600000,
            "y": 400,
            "start_time": "15-05-2006 00:00:00",
            "end_time": "16-05-2006 00:00:00"
    }, {
        "x": 1147824000000,
            "y": 77.67,
            "start_time": "16-05-2006 00:00:00",
            "end_time": "17-05-2006 00:00:00"
    }]
}];