如何在高图表中使用系列数据绘制折线图

How to plot line chart with series data in highcharts?

本文关键字：系列数据绘制折线图高图表更新时间：2023-09-26

我正在尝试使用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

问题是您实际上是为每个数据点创建一个新系列。所以目前你实际上有 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"
    }]
}];