以下のサンプルが非常に参考になります.
https://jsfiddle.net/canvasjs/cLfspuaq/
CanvasJSではデータのクリックから対応するデータを引っ張り出すのはどうしても自分で実装しなきゃいけません.
以下のようなサイトでどういった実装をすべきなのか書いてありますし、
先ほどのページもほぼ同様のことを行なっています.
注意点としては、グラフの単位を100倍とかして変えた時に判定の方法も変えなくてはならないので気をつけてください.
https://canvasjs.com/docs/charts/how-to/make-data-points-on-chart-draggable/
ただ、一つのデータ列にしか対応していないので、
データ列に対応したいとか最後に選択したデータ列に新しくデータを追加したいとかは自分で実装が必要です.
私の具体的な変更点は下記です.
- 複数のDataSeriesの表示対応
- 複数のDataSeriesの追加削除対応
- データポイントを追加するのは末尾ではなくてx座標的に適切な箇所
- x, yの変更できる幅を追加
以下の実装はcanvasJSのv2.3.1を想定して実装しています.
データ列の追加
データ列の削除
なんらかの方法で削除対象とするSOME_KEYおよびTARGET_KEYを用意する必要があります.
挿入位置の探索
今回のxValueの値から挿入すべき配列の位置を探します.
findIndexで探索してaddToで追加します.
var index = chart.data[0].dataPoints.findIndex(function (element) {
return element.x > xValue;
});
chart.data[0].addTo(“dataPoints”, {x: xValue, y: yValue}, index);
他DataSeries等の対応も全て含んだコード
下記の対応で、各データ点を追加または編集することができます.
