• 受付
  • すぐに回答を!

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

  • 質問No.9727414
  • 閲覧数183
  • ありがとう数0
  • 回答数5

お礼率 16% (1/6)

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

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


下記、現在のコードです。
HTML
<select multiple="multiple" name="accessCount" class="select-block" title="アクセス数">
<option value="0">サンプル1</option>
<option value="1">サンプル2</option>
<option value="2">サンプル3</option>
<option value="3">サンプル4</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: "サンプル1",
data: data.sample1,
yAxisID: "leftNumberOfPeopleYaxis"
},
{
label: "サンプル2",
data: data.sample2,
yAxisID: "leftNumberOfPeopleYaxis"
},
{
label: "サンプル3",
data: data.sample3,
yAxisID: "leftNumberOfPeopleYaxis"
},
{
label: "サンプル4",
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;}}
}
},
]
}
}
});

回答 (全5件)

  • 回答No.5

ベストアンサー率 73% (71/97)

変数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

ベストアンサー率 10% (445/4067)

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

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

ベストアンサー率 10% (445/4067)

onClickと同じようにonChangeというのがあるので
mdnとかで調べて見てください。
補足コメント
riisasa

お礼率 16% (1/6)

調べてみましたがchartjsとの組み合わせて使う方法がやっぱり分からず。。。
初心者の質問で申し訳ないです。。
投稿日時:2020/03/27 17:35
  • 回答No.2

ベストアンサー率 10% (445/4067)

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

お礼率 16% (1/6)

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

セレクトボックスでの切り替え処理については、その方法が知りたいのです。
投稿日時:2020/03/27 10:22
  • 回答No.1

ベストアンサー率 10% (445/4067)

どこにchange後の処理が書いてあるのでしょうか?
補足コメント
riisasa

お礼率 16% (1/6)

change後の処理とはどういう事でしょうか?
素人で申し訳ないです。。
投稿日時:2020/03/25 17:52
関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ