グラデーションでハイチャートにバーの色を設定する

Question

ハイチャートでバーをグラデーションで色付けしようとしています。私はそれらを着色されているが、問題は、勾配が他のデータグループを介して広がるのではなく、個々のバーされ、ここで私が何を意味するかの例ですされています

あなたが気付いた場合、勾配バーごとに新しいものを作成するのではなく、バーの間に広がっています。

それらをグラデーションに、私が使用しています：

colors: [ 
     { 
     linearGradient: [500, 0], 
     stops: [ 
      [0, 'rgb(247, 111, 111)'], 
      [1, 'rgb(220, 54, 54)'] 
     ] 
    }, 
     { 
     linearGradient: [500, 0], 
     stops: [ 
      [0, 'rgb(120, 202, 248)'], 
      [1, 'rgb(46, 150, 208)'] 
     ] 
    }, 
    { 
     linearGradient: [500, 0], 
     stops: [ 
      [0, 'rgb(136, 219, 5)'], 
      [1, 'rgb(112, 180, 5)'] 
     ] 
    },], 

Answer 1

をお試しください。以前は、linearGradient: [x1, y1, x2, y2]のような4つの座標を持つ配列を使用するオプションしかありませんでした。これにより、グラデーション座標がピクセルに適用され、そのためすべてのバーに使用されます（例のように）。

新しいオプションではなく、コンフィギュレーション・オブジェクトを使用することである。

linearGradient: { 
    x1: 0, 
    y1: 0, 
    x2: 1, 
    y2: 0 
} 

ここで座標は、個々のバーに対応する0と1の間の数です。ですから、あなたが設定オプションで使用していた配列を変更して（そして正規化された座標を使用すると）、各バーにグラデーションが表示されます。

例にjsfiddle

スクリーンショット：

編集：あなたが聞かせなければならない上から下に行く、x軸を持つ棒グラフとして そして、x1は0とx2ことy1とy2を変更する代わりに1にします。

Answer 2

をチャートにSETOPTIONSを追加

Highcharts.setOptions({ 
      colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572',  '#FF9655',    '#FFF263', '#6AF9C4'] 
      }); 

がhighchartsの現在のバージョンでは勾配を指定する2つの方法があり、このin fiddle