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;}}
}
},
]
}
}
});
補足
えっと、説明不足でしたね。 tamaCoさんのおっしゃる、グレープシティ株式会社という 日本の会社がライセンス販売している『TrueWebChart』です。 これを購入したのですが、付属しているマニュアルでは資料が少なすぎるので、 どなたか関連資料をご存じでないかと思いまして… 問い合わせれば早いのですが、まだライセンス登録をしてないようなのです。