用不同颜色填充的 Highchart 数据系列答案

【问题标题】：Highchart data series filled with different colors用不同颜色填充的 Highchart 数据系列
【发布时间】：2012-07-10 02:53:53
【问题描述】：

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

【问题讨论】：

标签： javascript colors highcharts

【解决方案1】：

是的，你可以只使用 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"，您可以指定使用哪个轴来区分不同的颜色。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

尝试使用fillColor 属性：

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

【讨论】：

非常感谢。这行得通！让连接器也填充特殊颜色会很棒。有可能吗？
“连接器”实际上是系列颜色。看这个例子，系列设置为绿色，特定点设置为各种颜色：jsfiddle.net/xqWp5/1

【解决方案4】：

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

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

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

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

【讨论】：

这里是描述此内容的 API 文档的链接：highcharts.com/ref/#series--data
我认为这适用于 tpye: 'column' ，但我需要它用于折线图。例如。 $(function () { var chart = new Highcharts.Chart({ chart: { renderTo: 'container' }, series: [{ data: [{ name: 'Point 1', color: '#00FF00', y: 0 }, { name: 'Point 2', color: '#FF00FF', y: 5 }] }] }); });但它不会改变点本身的颜色，它会设置工具提示的颜色。
你能举个简单的例子吗？谢谢。