默认情况下，让 Highcharts 呈现具有多种颜色的条形图/柱形图答案

【问题标题】：Having Highcharts render bar/column charts with multiple colors by default默认情况下，让 Highcharts 呈现具有多种颜色的条形图/柱形图
【发布时间】：2013-08-16 09:49:56
【问题描述】：

我知道有很多关于在某些 Highcharts 上设置条形颜色的问题，但我的问题有点不同。在 Highcharts 网站上，默认情况下，条形图/柱形图上的所有线条都是不同的颜色。当我尝试在我的网站上实现条形图/柱形图时，所有线条都是相同的颜色。我已经查看了 Highcharts 演示部分的小提琴，其中没有任何内容定义每个条的颜色都不同。如果我在我的网站上使用饼图，所有部分的颜色都不同，但我无法让我的条形图/列效仿。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

这里有几个问题...

(1) "在 Highcharts 网站上，默认情况下，条形图/柱形图上的所有线条是不同的颜色。”
这不是真的。 highcharts网站的首页有一个柱形图，所有的柱子颜色都一样。 http://www.highcharts.com/

(2) 当您在网站上实现条形图时，您的series 中是只有一个series 还是多个对象？我的猜测是你的series 中只有一个对象，在这种情况下，one series 将由 highcharts 以 one 颜色编码是有道理的。

(3) 打开 jsfiddle 中的 highcharts 示例之一。 http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-basic/

改变数据，这样：

    series: [{
        name: 'Year 1800',
        data: [107, 31, 635, 203, 2]
    }, {
        name: 'Year 1900',
        data: [133, 156, 947, 408, 6]
    }, {
        name: 'Year 2008',
        data: [973, 914, 4054, 732, 34]
    }]

...简化为：

    series: [{
        name: 'Year 1800',
        data: [107, 31, 635, 203, 2]
    }]

您应该只能在此处看到一种条形颜色。

希望这会有所帮助。

【讨论】：

感谢您的回复。你是对的，开盘图确实如此。我在谈论演示页面上的条形图/柱形图。至于我的网站，我在一个数组中有多个对象作为我的系列。所以： [{name: "Blah", data: [1, 2, 3, 4, 5]}, {name: "Blah2", data: [5,4,3,2,1]}] 还有任何当我添加一个新系列时，它会呈现为默认的蓝色。我添加了 4 或 5 系列，都呈现蓝色。还有其他想法吗？
@Siraris - 用你的代码或你的代码/输出的简化版本发布一个小提琴可能会有所帮助。
jsfiddle.net/LX7az _dataArray 是我之前发布的格式的对象数组，categoryArray 是名称数组。
这就是我所看到的：i.imgur.com/iyi7oJK.png 如果我将 4 个数据对象添加到数据数组。我希望每条线都是不同的颜色。数据格式为 [{name: "Rep", [34, 30, 64, 15, 9, 88, 5, 93, 1, 1, 2, 3]}, {name: "Test", [33, 27 , 60, 8, 8, 76, 4, 80, 3, 3, 8, 8]}... etc] 我唯一注意到的是，如果我在 Chrome 中检查数组，它会显示属性 _colorIndex 为 0我没有设置的所有对象。那会影响它吗？否则，根据演示和您的小提琴，它没有任何意义。
所以我在每个系列对象的小提琴中添加了 _colorIndex:0，这似乎导致线条都是相同的颜色。有没有办法禁用这种行为？我没有在任何地方的代码中设置它。

【解决方案2】：

将此添加到您的图表构造函数中：

colors: ['#0D233A', '#2F7ED8', '#AAAAAA'],
plotOptions: {
    series: {
    colorByPoint: true
    }
},

对于每个系列，它将遍历您的颜色列表并按顺序为每个条/列着色，如果到达列表末尾，则从头开始重复。

jsFiddle

【讨论】：

【解决方案3】：

每个系列都有自己的color，例如：http://jsfiddle.net/z5sGy/

但是你可以使用颜色来定义你自己的顺序：http://api.highcharts.com/highcharts#colors

如果您想修改每个数据点的颜色，可以为数据定义此参数。

http://jsfiddle.net/z5sGy/1/

【讨论】：