Highcharts与多色区域的折线图

我正尝试在多色区域的highcharts中创建折线图。我有一些我试图渲染的时间数据，每个结果都有一个状态。当状态是某种颜色时，我想更改折线图下方区域的颜色。Highcharts与多色区域的折线图

像这样：

enter image description here

下面是我的一些数据的样本：

{"GmtDateTime": "2013-07-31 12:20:15", "Speed": 40.068, "StatusCode": "1"}, 
{"GmtDateTime": "2013-07-31 12:30:11", "Speed": 41.823, "StatusCode": "2"}, 
{"GmtDateTime": "2013-07-31 12:40:15", "Speed": 41.987, "StatusCode": "1"}, 
{"GmtDateTime": "2013-07-31 12:50:11", "Speed": 40.192, "StatusCode": "3"}, 
{"GmtDateTime": "2013-07-31 13:00:12", "Speed": 40.877, "StatusCode": "3"}, 
{"GmtDateTime": "2013-07-31 13:10:12", "Speed": 40.364, "StatusCode": "2"}, 
{"GmtDateTime": "2013-07-31 13:20:15", "Speed": 44.331, "StatusCode": "1"}, 
{"GmtDateTime": "2013-07-31 13:30:14", "Speed": 42.89, "StatusCode": "1"},

x轴是 “GMTDatetime”，y轴是 “速度”，范围颜色是“StatusCode”。

在此先感谢！

来源

2013-08-05 Tom Halley

的请求提供更多信息/代码像您所在地区div名称... –

其他什么信息？没有代码可以显示。该图像只是在Paint中制作的。 –

Highcharts使用时间戳（时间以毫秒为单位）不像日期那样。串行/数据对象应该有x/y参数，不是“速度”。作为一个结果你的JSON应该看起来像：

{y: Date.UTC(2012,12,2), y: 42.89, "StatusCode": "1"}

Date.UTC允许以毫秒为单位的返回时间。

如果您需要使用不同颜色的零件图表，则需要使用其他系列。

编辑：

例子： http://jsfiddle.net/D4sbc/

来源

2013-08-06 09:03:07

是的，我正在将数据解析为该格式。这不是我需要帮助的数据，而是图表的样式。 –

查看我更新的帖子。 –

Highcharts与多色区域的折线图

回答

相关问题