この便利なリンクhttps://jsfiddle.net/5rz5r9ag/12/を見つけました。これは、通常のチャートjsでonclickイベントを取得する方法を示しています。これをreactchart jsで使用する場合の問題は、reactで折れ線グラフを作成する方法ではないため、その例のようにmyLineChartオブジェクトにアクセスできないことです。代わりに、私の反応は現在、レンダリング関数で次のようになっています。
return (
<Line
data={this.state.chartData}
options={{
onClick: function(evt) {
var element = myLineChart.getElementAtEvent(evt);
if(element.length > 0)
{
var ind = element[0]._index;
if(confirm('Do you want to remove this point?')){
data.datasets[0].data.splice(ind, 1);
data.labels.splice(ind, 1);
myLineChart.update(data);
}
}
},
....
/>
);
jsfiddleのようにreactでmyLineChartにアクセスできないため、折れ線グラフのポイントに対してonClickeventを作成する方法がわかりません。
onClickの2番目のパラメータを試してください：
return (
<Line
data={this.state.chartData}
options={{
onClick: function(evt, element) {
if(element.length > 0)
{
var ind = element[0]._index;
if(confirm('Do you want to remove this point?')){
data.datasets[0].data.splice(ind, 1);
data.labels.splice(ind, 1);
myLineChart.update(data);
}
}
},
....
/>
);
シンプルなラインonClick：こちら
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加