如何在highcharts中用系列数据绘制折线图?

时间:2015-01-30 11:05:24

标签: javascript highcharts highstock

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

1 个答案:

答案 0 :(得分:0)

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