Question

我已经处理了这个脚本很长一段时间我已经无法想象如何为两个系列数据阵列中的每个条形图提供不同的背景颜色，我能够这样做：

            data: [{
                y: 88,
                color: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 1,
                        y2: 0
                    },
                    stops: [
                        [0, 'rgb(66, 121, 54)'],
                        [.50, 'rgb(86, 146, 71)'],
                        [.50, 'rgb(97, 159, 79)'],
                        [1, 'rgb(120, 182, 98)']]
                }

                }

但我需要像我这样的数据数组：

    series: [{
            name: 'Previous',
            data : [145, 180, 199, 244]
        }, {
            name: 'Current',
            data : [145, 180, 199, 244]
        }]

并使用颜色数组给出不同的颜色，如：

        colors: [ 

            { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                    stops: [ [0, 'orange'], [1, '#fff']] },

            { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                    stops: [ [0, 'gray'], [1, '#fff']] },

            { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                    stops: [ [0, 'fushia'], [1, '#fff']] },

            { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                    stops: [ [0, 'green'], [1, '#fff']] },

            { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                    stops: [ [0, 'pink'], [1, '#fff']] },

            { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                    stops: [ [0, 'purple'], [1, '#fff']] },

        ],

我创建了http://jsfiddle.net/creativestudio/R4CmJ/

这是我想要做的快照，基本上每组的第一列有不同的颜色，第二栏有相同的纯色。 enter image description here

Answer 1

我能够通过将其添加到plotOptions系列＆＃34;来解决问题。 colorByPoint：true＆＃34;现在代码看起来像这样：

            series: {
                borderWidth: 0,
                shadow: false,
                borderRadius: 2,
                pointWidth: 16,
                shadow: false,
                colorByPoint: true

// groupPadding：0.001 }

然后colors数组看起来像这样：颜色：[

        { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                stops: [ [0, 'rgb(62, 131, 161)'], [.50, 'rgb(45, 94, 119)'], [.50, 'rgb(51, 107, 134)'], [1, 'rgb(34, 72, 91)']] },

        { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                stops: [ [0, 'rgb(62, 131, 161)'], [.50, 'rgb(45, 94, 119)'], [.50, 'rgb(51, 107, 134)'], [1, 'rgb(34, 72, 91)']] },

        { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                stops: [ [0, 'rgb(62, 131, 161)'], [.50, 'rgb(45, 94, 119)'], [.50, 'rgb(51, 107, 134)'], [1, 'rgb(34, 72, 91)']] },

        { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                stops: [ [0, 'rgb(62, 131, 161)'], [.50, 'rgb(45, 94, 119)'], [.50, 'rgb(51, 107, 134)'], [1, 'rgb(34, 72, 91)']] },

        { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                stops: [ [0, 'rgb(66, 121, 54)'], [.50, 'rgb(86, 146, 71)'], [.50, 'rgb(97, 159, 79)'], [1, 'rgb(120, 182, 98)']]},

        { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                stops: [ [0, 'rgb(167, 195, 100)'], [.50, 'rgb(183, 206, 128)'], [.50, 'rgb(192, 213, 145)'], [1, 'rgb(207, 223, 170)']]},

        { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                stops: [ [0, 'rgb(211, 127, 39)'], [.50, 'rgb(220, 151, 52)'], [.50, 'rgb(224, 163, 57)'], [1, 'rgb(232, 186, 72)']]},

        { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                stops: [ [0, 'rgb(190, 63, 36)'], [.50, 'rgb(203, 83, 48)'], [.50, 'rgb(208, 94, 53)'], [1, 'rgb(220, 116, 66)']]}
    ],

Answer 2

我发现了一种不同的方法，但它需要将颜色嵌入到数据中，因此您需要对数据进行后期处理才能达到此目的。

series: [
  {
    data: [{y: 145}, {y: 180},{y: 199}, {y: 244},]
  },

  {
    data: [
     {
       color: 'green',
       y: 145
     }, {
       color: 'fuchsia',
       y: 180
     },
     {
       color: 'blue',
       y: 199
     }, {
       color: 'orange',
       y: 244
     },
    ]
  },
 ] // end series

Answer 3

另外请记住，您可以将colorByPoint单独应用于一个系列。

如何将一系列颜色传递到highcharts.js上的系列条形图中

3 个答案: