ハイチャート：すべてのxAxisグリッドラインにクリック可能な画像を追加する

Question

私は、ユーザーが折れ線グラフのデータポイントをクリックして、その日付にメモを追加できるカスタム機能を構築しています。ノートは実際にはメトリック自体には添付されておらず、むしろそれが着信する日付であるため、これは誤解を招くことがあります。言い換えれば、もし私が1 01/25/12 01/08/12に及ぶ1つの折れ線グラフ上に6つの系列を持つならば、01/05/12の単一の注釈は6つの系列すべてに適用されます。したがって、6シリーズの1つまたは2012年1月5日のデータポイントをクリックすると、このメモがデータポイントに適用されると信じてもらえます。その日の土地。

ので、このユーザビリティの問題を解決するために、私は最高の視覚的キューは、このようなものになるだろうことを決めた：

各X軸グリッド線の上部にクリック可能なアイコンがあるでしょうことだろうxAxis gridLineで拡大/縮小する必要があります（ユーザーが拡大する領域を選択した場合など）。

これを解消するにはどうすればよいですか？すべての行にアイコンを追加するには、どのように最善の方法を提案する必要があります...私はすべてのポストクリック機能が既に構築されています。

Answer 1

redrawイベントを使用して画像を配置し、loadイベントを使用してマークを作成してください。エクスポート中にそれらを利用できるようにするには、loadにそれらを追加する必要があります。また、それぞれのredrawに新しい画像を作成したくない場合もあります。

これらのチャートイベントが使用されています。

x = chart.plotLeft + chart.xAxis[0].translate(i, false) - imageWidth/2, 
y = chart.plotTop - imageWidth/2; 

し、それらを追加：私はチャート上の画像を配置するx軸に対する逆翻訳を使用していdrawImages機能で

events: { 
    load: drawImages, 
    redraw: alignImages 
} 

クリックハンドラ、zIndex、ポインタカーソルの設定：

chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', x, y, imageWidth, imageWidth) 
    .on('click', function() { 
     location.href = 'http://example.com' 
    }) 
    .attr({ 
     zIndex: 100 
    }) 
    .css({ 
     cursor: 'pointer' 
    }) 
    .add(); 

alignImagesattr関数は、drawImagesと同じ方法で計算される画像の新しいx値とy値を設定するために使用されます。 jsfiddle

スクリーン上

全例：

Answer 2

複数のアイデア。まず、グラフredrawイベントを使用して、グラフがいつ再描画されているかを知ることができます。次に、関心のある軸の位置に画像を明示的に配置します。それらのクエリを直接DOMから取得する。

jQueryの使い方：彼らは（x、y）の位置にSVG "テキスト要素" 子供を持つことになります

$('.highcharts-axis') //return an array of the two axis. 

を。