HighCharts：使用不同颜色的标记突出显示特定值

Question

我必须使用Highcharts创建折线图，并且标记的颜色应根据特定值而变化。示例 - 我的数据如下：

 {
    "date": "2017-01-01",
    "cost": 5,
    "value": 1
  }

该图表是根据成本与日期绘制的。如果值为1则应为红色，如果值为0则颜色应为蓝色。

Answer 1

您可以将数据映射到Highcharts所需的格式并设置标记颜色：

var data = [{
    "date": "2017-01-01",
    "cost": 5,
    "value": 1
}, {
    "date": "2017-01-02",
    "cost": 5,
    "value": 0
}, {
    "date": "2017-01-03",
    "cost": 5,
    "value": 1
}].map(obj => {
    return {
        name: obj.date,
        y: obj.cost,
        marker: {
            fillColor: obj.value ? 'red' : 'blue'
        }
    }
});

Highcharts.chart('container', {
    xAxis: {
        type: 'category'
    },
    series: [{
        data: data
    }]
});

现场演示：http://jsfiddle.net/BlackLabel/btkuwL21/