echartsの柱状図、折れ線図を解決するグラフ以外のグラフィック要素をクリックするとclickイベントはトリガーされません
1535 ワード
需要説明:echartsのclickイベントは、グラフィック要素をクリックするだけでトリガーされます.データの最大値と最小値の差が大きい場合、数値の小さいグラフィック要素が小さすぎてトリガーされません.今、クリックイベントのparamsのdataデータ、すなわちseriesに入力された元のデータ項目data内の記録を得るには、イベントをクリックする必要があります.空白領域をクリックすることで、データの取得をトリガーする方法もあります.
解決方法:
1)getZr()を使用してグラフのcanvas領域全体のクリックイベントを追加し、paramsが携帯する情報を取得する.
2)マウスクリック位置を取得する;
3)図形を描くグリッド外のクリックイベント、例えばX、Y軸lable、空白位置などのクリックイベントをフィルタリングし、グラフ領域のクリックイベントだけを必要とする.
4)クリック位置に対応するx軸データのインデックス値を取得し,インデックス値により対応するdataデータを取得する.
5)myChartのseriesを取得し、インデックス値に基づいてdataを取得する.
完全なコードブロック:
以上、柱状図、折れ線図を解決してグラフ以外のグラフィック要素をクリックしてもclickイベントをトリガーしない方法ですが、他にもっと良い方法があれば教えてください.
解決方法:
1)getZr()を使用してグラフのcanvas領域全体のクリックイベントを追加し、paramsが携帯する情報を取得する.
2)マウスクリック位置を取得する;
var pointInPixel= [params.offsetX, params.offsetY];
3)図形を描くグリッド外のクリックイベント、例えばX、Y軸lable、空白位置などのクリックイベントをフィルタリングし、グラフ領域のクリックイベントだけを必要とする.
myChart.containPixel('grid',pointInPixel)
4)クリック位置に対応するx軸データのインデックス値を取得し,インデックス値により対応するdataデータを取得する.
var xIndex=myChart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
5)myChartのseriesを取得し、インデックス値に基づいてdataを取得する.
option.series[0].data[xIndex];//myChart.getOption().series[0].data[xIndex]
完全なコードブロック:
myChart.getZr().on('click',function (params){
var pointInPixel= [params.offsetX, params.offsetY];
if (myChart.containPixel('grid',pointInPixel)) {
var xIndex=myChart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
var ds = option.series[0].data[xIndex];//myChart.getOption().series[0].data[xIndex]
_this._setRowColor(ds);//
}
});
以上、柱状図、折れ線図を解決してグラフ以外のグラフィック要素をクリックしてもclickイベントをトリガーしない方法ですが、他にもっと良い方法があれば教えてください.