5

私の最終的な目標は、y 軸の特定の値 (56 など) が常に画像と同じ色/位置で表されるように、以下のサンプル背景画像を使用する「領域範囲」チャートを作成することです。

以下のフィドルでわかるように、ハイチャートを使用して、任意の画像を使用して範囲内の領域を塗りつぶしたり陰影を付けたりする「arearange」チャートを作成できます。ただし、2 つのグラフの (y 軸) 値が異なっていても、色はまったく同じです。「チャート 1」の 6 月のピークは、「チャート 2」とは値が異なりますが (301 対 401)、同じ色です。

http://jsfiddle.net/malonso/YwuqD/1/

塗りつぶしの色/パターンに関するコード:

    fillColor: {
        pattern: 'http://i.stack.imgur.com/dezhE.png',
        width: 10,
        height: 300
    }

背景画像がy軸上の特定の範囲をカバーするように指定することはできますか?

サンプル画像:

ここに画像の説明を入力

更新: 何らかの理由で、クロム以外のブラウザーで表示すると、グラフの背景がグラデーションとして表示されなくなったため、フィドルがどのように見えるかのスクリーンショットを添付しました。

ここに画像の説明を入力

4

2 に答える 2

3

チャートがレンダリングされた後に画像の位置を更新することもできます。唯一の制限は、1 つのポイントを知ることです (たとえば、パターンの上の最初のピクセルは値 500 にする必要があります)。例を参照してください: http://jsfiddle.net/YwuqD/9/

パターンを作成するときに、最初に将来の更新のための参照を追加します。

this.upgradeGradients = image;

次に、ロード時にこれを使用します：

        load: function() {
            var chart = this,
                image = chart.renderer.upgradeGradients,
                top = chart.yAxis[0].toPixels(500), //500 is the top of image - only for example value
                diff = chart.plotTop + top;

            image.attr({y : diff});
        }
于 2013-07-10T12:12:23.027 に答える