javascript - 具有多色区域的 Highcharts 折线图

Question

我正在尝试在具有多色区域的高图中创建折线图。我有一些我正在尝试渲染的定时数据，这些数据也对每个结果都有一个状态。当状态为某种颜色时，我想更改折线图下方区域的颜色。

像这样：

这是我的一些数据的示例：

{"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 轴为“Speed”，范围颜色为“StatusCode”。

提前致谢！

Answer 1

Highcharts 使用时间戳（以毫秒为单位的时间）而不是您所拥有的日期。系列/数据对象应具有 x/y 参数，而不是“速度”。结果，您的 json 应如下所示：

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

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

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

编辑：

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