グラフ上のポイントにカーソルを合わせると、現在どのポイントにいるかを示す素敵な縦線が表示されます。クリック後にホバーしたときに垂直線が残るように、クリックイベントを変更したいと思います。クリック時に線の色を変更するのが理想的ですが、必須ではありません。
別のポイントをクリックすると、前の行を削除したいと思います。これをどのように達成できるかについてのアイデアはありますか？
質問する
4164 次
2 に答える
4
私が言ったように、上記の解決策は本当にクールですが、ハイチャートの実装の詳細への一種のハック（十字線のパスを取得）であり、将来のリリースで機能しなくなる可能性があり、完全にクロスブラウザではない可能性があります（特に< IE8はSVGをサポートしていません。追加パスは、highchartのadd pathメソッドで処理する必要があるため、引き続き機能する可能性がありますが、十字線のパスを取得できない可能性があります。間違っている可能性があります。SVGnoobです）。そこで、ここでは、plotLinesを動的に追加する別のソリューションを紹介します。PlotLinesでは、dashStyles、labelなどの追加機能も使用できます。
クリックされたポイントの軸とx値を取得します（十字線と正確に重ならない場合があります）
var xValue = evt.xAxis[0].value;
var xAxis = evt.xAxis[0].axis;
または
編集クリック位置ではなく十字線の位置にplotLineを配置したい場合は、次の式を使用できます（これを取得するための直接のAPIはなく、ソースコードから取得されるため、コードが変更されると機能しなくなる可能性があります）
var chart = this;
var index = chart.inverted ? chart.plotHeight + chart.plotTop - evt.chartY : evt.chartX - chart.plotLeft;
var xValue = chart.series[0].tooltipPoints[index].x;
プロットラインを追加
xAxis.addPlotLine({
value: xValue,
width: 1,
color: 'red',
//dashStyle: 'dash',
id: myPlotLineId
});
既存のプロットラインをクリーンアップできます
$.each(xAxis.plotLinesAndBands,function(){
if(this.id===myPlotLineId)
{
this.destroy();
}
});
また
try {
xAxis.removePlotLine(myPlotLineId);
} catch (err) {}
ピースをまとめる
var myPlotLineId="myPlotLine";
...
var chart=this;
index = chart.inverted ? chart.plotHeight + chart.plotTop - evt.chartY : evt.chartX - chart.plotLeft;
var xValue = chart.series[0].tooltipPoints[index];
// var xValue = evt.xAxis[0].value; // To use mouse position and not crosshair's position
var xAxis = evt.xAxis[0].axis;
$.each(xAxis.plotLinesAndBands,function(){
if(this.id===myPlotLineId)
{
this.destroy();
}
});
xAxis.addPlotLine({
value: xValue,
width: 1,
color: 'red',
//dashStyle: 'dash',
id: myPlotLineId
});
...
クリック位置@jsFiddleにプロットラインを追加クリック@jsFiddle
のプロットラインとして十字線/カーソルを永続化
于 2012-08-21T20:20:45.623 に答える
2
あなたはいくつかの方法でそれを行うことができます
Highchartには、チャートにさまざまなグラフィックを追加できる非常に優れたレンダラーがあります。オプションの1つは、パスを追加することです。ここで同じことを説明します。
十字線のパスを再利用し、あなたが言及した色のようないくつかの追加のスタイルで同じものをチャートに追加します。十字線のパスは文字列形式であるため取得でき、関数this.tooltip.crosshairs[0].dを使用して配列に簡単に変換できます。Array.split()
click: function() {
this.renderer.path(this.tooltip.crosshairs[0].d.split(" ")).attr({
'stroke-width': 2,
stroke: 'red'
}).add();
}
これにより、行の追加が完了します。返されたオブジェクトをグローバル変数に格納し、そのような行をもう1つ追加しようとしているときに、を呼び出すことで既存のオブジェクトを破棄できます。Element.destroy()
var line;
...
chart:{
events: {
click: function() {
if (line) {
line.destroy();
}
line = this.renderer.path(this.tooltip.crosshairs[0].d.split(" ")).attr({
'stroke-width': 2,
stroke: 'red'
}).add();
}
}
...
クリック@jsFiddleでツールチップ/十字線を永続化する
線と一緒に表示するメタデータがあまりない場合、これが最も簡単な（または最もクールな:)）アプローチです。レンダラーのテキストオブジェクトなどを使用する場合は、メタデータを添付することもできます。
別の方法は、xAxisに垂直plotLinesを追加することです。
アップデート
ズーム、スクロールなどで機能するこの質問に対する他の解決策を参照してください
于 2012-08-21T19:30:42.293 に答える