Highchart数据系列以不同颜色填充

Question

我需要弄清楚如何在Highcharts中使用不同的颜色为相同数据系列的点着色。例如，假设我有一个关于几天的数据系列，并且我想要画一条线图。在这条线图中，特定的日期应该是可以区分的（也许通过某种颜色进行着色）。

- whiteErru

---

你尝试过什么？(http://mattgemmell.com/2008/12/08/what-have-you-tried/) - Event_Horizon

http://www.highcharts.com/stock/ref/#series - Ricardo Alvaro Lohmann

Answer 1

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

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

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

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

- The Jakester

---

这里是描述此内容的API文档链接：http://www.highcharts.com/ref/#series--data - Mark

我认为这对于“column”类型可以起作用，但我需要它适用于折线图。例如：$（function（）{ var chart = new Highcharts.Chart（{ chart：{ renderTo：'container' }， series：[{ data：[{ 名称：'Point 1'， 颜色：'#00FF00'， y：0}，{ 名称：'Point 2'， 颜色：'#FF00FF'， y：5 }]
}] }）; }）;但它不会改变点本身的颜色，而是设置了工具提示的颜色。 - whiteErru

你能否提供一个简单的例子？谢谢。 - whiteErru

Answer 2

尝试使用fillColor属性：

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

- Ruchit Rami

---

非常感谢。这个有效！如果连接器也能填充特殊颜色就太好了。这可行吗？ - whiteErru

“连接器”实际上是系列颜色。请参考此示例，其中系列设置为绿色，特定点设置为各种颜色：http://jsfiddle.net/xqWp5/1/ - The Jakester

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"，您可以指定用于区分不同颜色的轴。

- user9066203

Answer 4

如果您想要部分着色的线条，您需要有与颜色相同数量的系列。换句话说，每种颜色都应该是具有定义颜色的单独系列。

- Sebastian Bochan