0

我已经处理这个脚本很长时间了，我不知道如何为两个系列数据数组中的每个条提供不同的背景颜色，我可以这样做：

            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/

这是我正在尝试做的快照，基本上每组的第一列有不同的颜色，第二个栏有相同的纯色。在此处输入图像描述

4

3 回答 3

1

我能够使用将其添加到 plotOptions 系列“colorByPoint：true”来解决问题，现在代码如下所示：

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

// groupPadding: 0.001 }

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

        { 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)']]}
    ],
于 2012-11-16T23:58:54.467 回答
0

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

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
于 2012-11-17T00:03:32.530 回答
0

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

于 2012-11-18T19:14:57.763 回答