我正在尝试使用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
});
更新
答案 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"
}]
}];