chart.jsで生成されたグラフにて、凡例部分をjsで選択（クリック）する方法

前提・実現したいこと

chart.jsにて、凡例の選択・非選択を、jsで操作したい。

例）凡例に、項目A、B、Cがある
→Bをクリック
→画面リロード
→Bがクリックされた状態になっている　←詰まっている所

試したこと

jQueryにて、凡例を取得しクリックさせようとした。
→canvas内なので、上手く取得できず。

▼chart.js 公式のサンプルサイト
https://www.chartjs.org/samples/latest/charts/bar/horizontal.html
jsで、右上の凡例の"dataset 1"を、クリックしたいです。
$("#canvas")
を用いても、canvas内のグラフ要素がとれず、以下のみが取得される。
<canvas id="canvas" style="display: block; width: 723px; height: 361px;" width="1446" height="722" class="chartjs-render-monitor"></canvas>

エラー

なし

補足情報

・凡例自体の表示／非表示ではなく、選択／非選択
・chart.jsでなくとも、別のグラフ描画ライブラリで可能なものがあれば、そちらでの可
グラフが描画でき、凡例の選択のコントロールができればいいです。

m.ts10806

2019/05/20 03:31

>jQueryにて、凡例を取得しクリックさせようとした。再現できるコード（実コード実データでなくても最小構成のミニマムコードで構いません）と画面キャプチャなど現象が分かる情報をご提示ください。

GOLDION

2019/05/20 04:55 編集

ご返信ありがとうございます。 ▼chart.js 公式のサンプルサイト https://www.chartjs.org/samples/latest/charts/bar/horizontal.html jsで、右上の凡例の"dataset 1"を、クリックしたいです。 $("#canvas") を用いても、canvas内の要素がとれず。

m.ts10806

2019/05/20 04:57

質問は編集できますので適宜ご対応いただければと。また「エラーがないか」とか起きている現象も追記してください

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScript
1  var canvas = myHorizontalBar.canvas;
2  var rect = canvas.getBoundingClientRect();
3  var hitBox = myHorizontalBar.legend.legendHitBoxes[0]; // 最初の凡例の場合
4  var event = new MouseEvent('click', { clientX: rect.left + hitBox.left + 1, clientY: rect.top + hitBox.top + 1 });
5  canvas.dispatchEvent(event);