web-dev-qa-db-ja.com

グラデーションの問題があるハイチャートのバーの色のスタイリング

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

enter image description here

お気づきのように、グラデーションはバーごとに新しいものを作成するのではなく、バーの間に広がっています。

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

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)']
        ]
    },],
javascripthighcharts
21
Mike Sweeney

現在のバージョンのハイチャートでグラデーションを指定するには、2つの方法があります。以前は、linearGradient: [x1, y1, x2, y2]のような4つの座標を持つ配列を使用するオプションしかありませんでした。これにより、グラデーション座標がピクセルに適用されるため、すべてのバーに使用されます（例のように）。

新しいオプションは、代わりに構成オブジェクトを使用することです。

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

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

jsfiddle の例

スクリーンショット：

enter image description here

編集：棒グラフでは、x軸が上から下に移動するため、y1を変更する代わりに、x1を0、x2を1にする必要があります。およびy2。

27
eolsson

チャートにSetoptionsを追加する

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

これを試してください フィドルで

3
Sreenath Plakkat