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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11416554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 13:08:02  来源:igfitidea点击:

Highchart data series filled with different colors

javascriptcolorshighcharts

提问by whiteErru

I need to figure out how to color the same data series points with different colors in Highcharts. For example, let's say I have a data series for several days and I would like to have a line graph. In this line specific days should be distinguish (maybe colored by some color).

我需要弄清楚如何在 Highcharts 中用不同的颜色为相同的数据系列点着色。例如,假设我有几天的数据系列,我想要一个折线图。在这条线上应该区分特定的日子(可能用某种颜色着色)。

回答by The Jakester

In your data, you can specify the color of the specific points:

在您的数据中,您可以指定特定点的颜色:

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

For line charts, use "fill color", as explained in the answer below.

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

For an example in jsFiddle, see http://jsfiddle.net/xqWp5/1/

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

回答by Ruchit Rami

Try using the fillColorproperty:

尝试使用该fillColor属性:

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

回答by whiteErru

Yes you can just use plotOptions.area.zones :

是的,您可以只使用 plotOptions.area.zones :

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

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

see the example :

看例子:

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/

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

With the zoneAxis: "x"you can specify which axis you use to discriminate your differents colors.

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

回答by Sebastian Bochan

You you would like to have colored line partially, you need to have as much series as colors. In other words, each color should be separate series with defined color.

你想要部分彩色线,你需要有和颜色一样多的系列。换句话说,每种颜色都应该是具有定义颜色的单独系列。