javascript - 用不同颜色填充的 Highchart 数据系列

Question

我需要弄清楚如何在 Highcharts 中用不同颜色为相同的数据系列点着色。例如，假设我有几天的数据系列，我想要一个折线图。在此行中，应区分特定日期（可能用某种颜色着色）。

Answer 1

在您的数据中，您可以指定特定点的颜色：

data: [{
    name: 'Point 1',
    color: '#00FF00',
    y: 0
}, {
    name: 'Point 2',
    color: '#FF00FF',
    y: 5
}]

对于折线图，请使用“填充颜色”，如下面的答案所述。

有关 jsFiddle 中的示例，请参阅http://jsfiddle.net/xqWp5/1/

Answer 2

尝试使用该fillColor属性：

{
    name: 'xyz',
    x: 123,
    y: 456,
    fillColor: '#00FF00'
}

Answer 3

是的，您可以只使用 plotOptions.area.zones ：

https://api.highcharts.com/highcharts/plotOptions.area.zones

看例子：

plotOptions: {
    series: {
        zoneAxis: "x",
        zones: [{
            value: 0,
            className: 'zone-0'
        }, {
            value: 10,
            className: 'zone-1'
        }, {
            className: 'zone-2'
        }],
        threshold: -10
    }
},

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/css/color-zones/

使用 ，zoneAxis: "x"您可以指定使用哪个轴来区分不同的颜色。

Answer 4

您希望部分有彩色线条，您需要有与颜色一样多的系列。换句话说，每种颜色都应该是具有定义颜色的单独系列。