x軸の月をchart.jsの線グラフでクリック可能にする

Question

chart.jsでa line chartを作成しています。私のx軸は時間ベースで、月を表示します。
各「月の列」をクリック/選択可能にする必要がありますが、これを管理する方法が見つかりません。 getElementAtEvent()のようなメソッドはデータを返すので、どの月が選択されているかを知ることができます。しかし、ユーザーがポイントを右クリックするだけで、「列」内のどこかではクリックしないと機能しません。

どうすればいいですか？それとも既にこれのためのプラグインはありますか？

Answer 1

クリックしたスケール領域のスケール値を返す.getValueForPixel()と呼ばれる文書化されていない時間スケールのプロトタイプメソッドを使用して、この作業を行うことができました。

このメソッドは、目盛りラベルを生成するために使用されたモーメントオブジェクトを返します。したがって、この値を表示するときに、時間スケールに設定された同じ書式文字列を使用できます（視覚的に同じにしたい場合）。私はこれを一般的なonClick option config propertyと結びつけて、あなたがしたいことに対するかなり簡単なアプローチをしました。

ここでその方法を説明します。 optionsオブジェクトに、この関数を使用してonClickプロパティを追加します。

onClick: function(e) { 
    var xLabel = this.scales['x-axis-0'].getValueForPixel(e.x); 
    console.log(xLabel.format('MMM YYYY')); 
    alert("clicked x-axis area: " + xLabel.format('MMM YYYY')); 
}, 

ここにはcodepen exampleが掲載されています。