バックグラウンド画像/パターンの位置を制御する

Question

私の最終目標は、y軸（例えば56）の所与の値が常に同じカラー/カラーで表されるように、サンプル背景画像を使用する「アサリッジ」チャートを作成し、画像からの位置。

下のフィドルで分かるように、ハイチャートを使用して、任意の画像を使用して範囲内の領域を塗りつぶす「アサリッジ」グラフを作成できます。ただし、2つのグラフの値が異なる（Y軸）場合でも、色はまったく同じです。 6月の「チャート1」のピークは、値が異なっていても「チャート2」と同じ色です（301対401）。

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

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

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

それは何らかの形で背景画像は、y軸上の特定の範囲をカバーするように指定することは可能ですか？

サンプル画像：

UPDATE：何らかの理由でグラフの背景には、もはや、クロム以外のブラウザで表示した勾配として表示されていないので、私は何のスクリーンショットを添付していますあなたはチャートはこれを使用してレンダリングする場合

Answer 1

：フィドルは次のようになります

/********************************************************* 
* Generate the example chart 
*********************************************************/ 

var chart = new Highcharts.Chart({ 

    chart: { 
     renderTo: 'container' 
    }, 

    title: { 
     text: 'Chart 1' 
    }, 

    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 
    series: [{ 
     type: 'arearange', 
     data: testData, 
     fillColor: { 
      pattern: 'http://i.stack.imgur.com/dezhE.png', 
      width: 10, 
      height: 300 + Math.round(testData[0][0]/100) * 100 
     } 
    }] 

}); 

var chart2 = new Highcharts.Chart({ 

    chart: { 
     renderTo: 'container2' 
    }, 

    title: { 
     text: 'Chart 2' 
    }, 

    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 
    series: [{ 
     type: 'arearange', 
     data: testData2, 
     fillColor: { 
      pattern: 'http://i.stack.imgur.com/dezhE.png', 
      width: 10, 
      height: 300 + Math.round(testData2[0][0]/100) * 100 
     } 
    }] 

}); 

それはY軸の開始点を加算する（恐らくMath.round（TESTDATA [0] [0]/100）×100）は、画像の高さ。

（付属のコードにわずかな変更はあり）

違いは、あなたはまた、チャートが描画された後の画像の位置を更新しようとすることができますちょっと微妙な

Answer 2

です。 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}); 
     } 

を