具有多色区域的 Highcharts 折线图答案

【问题标题】：Highcharts line chart with multi colored areas具有多色区域的 Highcharts 折线图
【发布时间】：2013-08-05 23:53:30
【问题描述】：

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

像这样：

这是我的一些数据示例：

{"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”。

提前致谢！

【问题讨论】：

请提供更多信息/代码，例如您的区域 div 名称...
还有什么信息？没有可显示的代码。那张图片是用 Paint 制作的。

标签： javascript highcharts

【解决方案1】：

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

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

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

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

编辑：

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

【讨论】：

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