chartjsでグラフを選択制にしたい

質問

chartjsで折れ線グラフを作成しています。
凡例をクリックするとグラフが表示・非表示と切り替わるように、セレクトボックスの選択で表示・非表示を切り替えたいです。

ご教授ください。
よろしくお願いいたします。

下記、現在のコードです。
HTML
<select multiple="multiple" name="accessCount" class="select-block" title="アクセス数">
<option value="0">サンプル１</option>
<option value="1">サンプル２</option>
<option value="2">サンプル３</option>
<option value="3">サンプル４</option>
</select>

<canvas id="chart-line" style="max-width: none"></canvas>

js
※文字数上、datasetsの諸々の設定は省略してあります。
var data = {
labelsY: ["01\/28 12:00","01\/29 00:00","12:00","01\/30 00:00","12:00"],
sample1: [2,0,0,0,0],
sample2: [1,0,0,0,0],
sample3: false,
sample4: false
};
var lineData = {
labels : data.labelsY,
datasets: [
{
label: "サンプル１",
data: data.sample1,
yAxisID: "leftNumberOfPeopleYaxis"
},
{
label: "サンプル２",
data: data.sample2,
yAxisID: "leftNumberOfPeopleYaxis"
},
{
label: "サンプル３",
data: data.sample3,
yAxisID: "leftNumberOfPeopleYaxis"
},
{
label: "サンプル４",
data: data.sample4,
yAxisID: "leftNumberOfPeopleYaxis"
},
],
};
var ctx2 = document.getElementById("chart-line").getContext("2d");
var myLineChart = new Chart(ctx2,{
type: 'line',
data: lineData,
options: {
legend: {
display: false
}
},
scales: {
xAxes: [
{
ticks: {
autoSkip: false,
}
}
],
yAxes: [
{
id: 'leftNumberOfPeopleYaxis',
type: 'linear',
position: 'left',
scaleLabel: {
display: true,
labelString: 'アクセス数',
},
ticks: {
beginAtZero: true,
callback: function(value) {if (value % 1 === 0) {return value;}}
}
},
{
id: 'rightTimeYaxis',
type: 'linear',
position: 'right',
scaleLabel: {
display: true,
labelString: '待機時間',
},
ticks: {
beginAtZero: true,
callback: function(value) {if (value % 1 === 0) {return value;}}
}
},
]
}
}
});

回答No.5

nekomikekamo

変数chartjsは環境に合わせて変更してください。
let select = document.querySelector(".select-block");
select.addEventListener('change',() =>{
for (let i = 0; i < select.length; i++) {
try{
let meta = chartjs.getDatasetMeta(i);
if (select[i].selected) meta.hidden = true;
else meta.hidden = false;
}catch(e){
//
}
}
chartjs.update();
});

回答No.4

doraneko66

それ。。。
JavaScript基礎から、勉強した方が良いですよ。

どのプログラミングでも、そう言うことあるんで
組み合わせて使えないってことは、プログラムで
機能とか作れませんよ。。。

回答No.3

doraneko66

onClickと同じようにonChangeというのがあるので
mdnとかで調べて見てください。

補足

調べてみましたがchartjsとの組み合わせて使う方法がやっぱり分からず。。。
初心者の質問で申し訳ないです。。

回答No.2

doraneko66

クリック処理とセレクトボックス切り替え時の処理は、どこに書いてあるのでしょうか？

補足

凡例をクリックして表示・非表示に切り替える処理は、Chart.jsのファイルにもともとあるようです。
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js

セレクトボックスでの切り替え処理については、その方法が知りたいのです。

回答No.1

doraneko66

どこにchange後の処理が書いてあるのでしょうか？

補足

change後の処理とはどういう事でしょうか？
素人で申し訳ないです。。