highcharts - スプライン グラフのグラデーション塗りつぶし

Question

私は初めて Highcharts を使用していますが、かなり印象的です。ただし、次のようなことを達成しようとしています:

Hightcharts を使用して可能ですか? 円グラフにグラデーションを追加できることは知っていますが、それを達成する方法がどこにもありません。チャートに背景画像を設定できますか?

Answer 1

以下を使用して、背景画像またはグラデーションを設定できます。

chart: {
        type: 'line',
        plotBackgroundImage: 'http://www.highcharts.com/demo/gfx/skies.jpg'
    },

また

chart: {
        type: 'line',
        plotBackgroundColor: {
            linearGradient: [0, 0, 500, 500],
            stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(200, 200, 255)']
            ]
        }
    },

http://api.highcharts.com/highcharts#chart.plotBackgroundImage または http://api.highcharts.com/highcharts#chart.plotBackgroundColor

ただし、これは線自体ではなく、プロット エリアの背景です。線に段階的な色を付けるには、系列の色をグラデーションとして指定できます。例えば

  series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        color: {
            linearGradient: [0, 0, 0, 500],
            stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(100, 100, 155)']
            ]
        }
    }]

http://jsfiddle.net/wXqM9/

linearGradients の構文は次のとおりです。

linearGradient: [x1, y1, x2, y2]

(x1, y1) の始点と (x2, y2) の終点を持つ線形グラデーション オブジェクトを作成します。

 stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(100, 100, 155)']
            ]

これにより、グラデーションの 2 つのポイントと使用する色が指定されます。この場合、勾配は最初の (255,255,255) から (100, 100, 155) と最後になります。3 つのストップを指定した場合、グラデーションをある色から中間で別の色に移動させ、最後に別の色に移動させることができます。お役に立てれば。私が投稿したjsfiddleでこれをいじってみて、それがどのように機能するかを確認することをお勧めします。