0

私はこのスクリプトを長い間扱ってきましたが、2 つのシリーズのデータ​​配列の各バーに異なる背景色を与える方法がわかりません。次のようにすることができます。

            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/を作成しました

これは私がやろうとしていることのスナップショットです。基本的に、各グループの最初の列は異なる色で、2 番目のバーは同じ単色です。ここに画像の説明を入力

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 を 1 つのシリーズに個別に適用できることも覚えておいてください。

于 2012-11-18T19:14:57.763 に答える