chart.jsでバブルチャートをスライダー（スライドバー？）でグリグリ動かす後編
目指す姿（後編）
以下のように、chart.jsのバブルチャートをスライダーでグリグリ動かすだけでなく、「スタート/ストップ」ボタンによってそのスライダーを自動再生させる。（＆ループさせる）
スライダーを作成するところまでは前回の記事に記載しましたので、良ければそちらもご覧下さい！
https://qiita.com/supinngassenn/items/ef4bfce194b1def0cf03
説明
ステップ１
HTMLに「スタート/ストップ」ボタンを設置する。
<input type="button" value="スタート/ストップ" onclick="button_fnc()">
上記によって、ボタンを押すとjavaScript側のbutton_fnc()が呼ばれるようになる。(ステップ３で定義します)
ステップ２
スライダーを一つ横に動かす関数を定義する。スライダーが右端まで来たら左端に戻るように、if,elseで条件分岐している。
document.getElementById("slider_position").valueにスライダーの位置情報が入っているので、そこに＋１すればいい。ただし文字列で格納されているので、parseIntしないと「0,1,11,100,,,」と増えていってしまう。parseIntすれば「0,1,2,,,」と増えていってくれる。
なお、ここに出て来るbubble_chart_move()は前回作成した関数である。
// スライダーを一つ横に動かす。バーが右端まで来たら左端に戻る
var auto = function () {
// 今回はスライダーの範囲を0~4と設定している
if (document.getElementById("slider_position").value < 4) {
// valueはSting型で保持されているので、プラス1する前にparseIntする
document.getElementById("slider_position").value = parseInt(document.getElementById("slider_position").value) + 1;
bubble_chart_move();
}
else {
document.getElementById("slider_position").value = 0;
bubble_chart_move();
}
}
ステップ３
ステップ１で登場したbutton_fnc()の処理を作成する。
また、一つのボタンで「スタート」と「ストップ」を切り替えられるように、button_flagによって制御する。
「auto_func = setInterval("auto()",1000);」という書き方によって、「auto()を1000ミリ秒ごとに呼び出す」ことができる。止めるときは「clearTimeout(auto_func);」を用いる。
// スタート/ストップボタンが押された時の処理
var auto_func;
var button_flag = 0; // 初期状態を0としておく
function button_fnc() {
// ボタンが押された時、button_flag = 0なら自動再生スタート
if (button_flag == 0) {
auto_func = setInterval("auto()",1000);
button_flag = 1;
}
// ボタンが押された時、button_flag = 1なら自動再生ストップ
else {
clearTimeout(auto_func);
button_flag = 0;
}
}
以上で完成です！
最終刑のコード
以下のコードをそのままコピペしてブラウザで表示すれば、実際に試すことができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>グラフ</title>
</head>
<body>
<h1>バブルチャート</h1>
<canvas id="myBubbleChart"></canvas>
<input type="button" value="スタート/ストップ" onclick="button_fnc()"><br>
<div class="slidecontainer" id="sliders">
<input type="range" min="0" max="4" value="0" step="1" class="slider" id="slider_position">時系列 : <span id="val_position">4週間前</span><br/>
</div>
<!-- CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
<script>
// バブルチャートのデータ定義（4週間前、3週間前、2週間前、1週間前、現在の順で格納）
var data1 = [[{x: 15,y: 60,r: 35}],
[{x: 21,y: 50,r: 32}],
[{x: 36,y: 44,r: 24}],
[{x: 46,y: 34,r: 34}],
[{x: 56,y: 24,r: 58}]]
var data2 = [[{x: 45,y: 50,r: 15}],
[{x: 57,y: 60,r: 25}],
[{x: 69,y: 70,r: 35}],
[{x: 70,y: 80,r: 55}],
[{x: 79,y: 83,r: 45}]]
var data3 = [[{x: 25,y: 20,r: 30}],
[{x: 35,y: 22,r: 32}],
[{x: 55,y: 24,r: 34}],
[{x: 60,y: 34,r: 39}],
[{x: 65,y: 34,r: 30}]]
var data4 = [[{x: 10,y: 70,r: 25}],
[{x: 12,y: 72,r: 22}],
[{x: 15,y: 74,r: 24}],
[{x: 20,y: 84,r: 20}],
[{x: 35,y: 74,r: 40}]]
var data5 = [[{x: 30,y: 40,r: 30}],
[{x: 51,y: 42,r: 32}],
[{x: 60,y: 44,r: 34}],
[{x: 70,y: 54,r: 34}],
[{x: 73,y: 64,r: 54}]]
var data6 = [[{x: 35,y: 50,r: 15}],
[{x: 47,y: 60,r: 25}],
[{x: 59,y: 70,r: 35}],
[{x: 69,y: 80,r: 35}],
[{x: 73,y: 70,r: 35}]]
var data7 = [[{x: 15,y: 25,r: 30}],
[{x: 17,y: 35,r: 40}],
[{x: 28,y: 45,r: 50}],
[{x: 30,y: 35,r: 60}],
[{x: 40,y: 45,r: 70}]]
var data8 = [[{x: 34,y: 40,r: 25}],
[{x: 42,y: 50,r: 15}],
[{x: 50,y: 60,r: 10}],
[{x: 60,y: 70,r: 30}],
[{x: 65,y: 45,r: 20}]]
var data9 = [[{x: 12,y: 15,r: 10}],
[{x: 17,y: 25,r: 20}],
[{x: 38,y: 35,r: 30}],
[{x: 40,y: 45,r: 30}],
[{x: 45,y: 55,r: 30}]]
// バブルチャートのデータ取得関数（添え字によって4週間前、3週間前、2週間前、1週間前、現在を切替）
function get_data1(num) {
return data1[num];
}
function get_data2(num) {
return data2[num];
}
function get_data3(num) {
return data3[num];
}
function get_data4(num) {
return data4[num];
}
function get_data5(num) {
return data5[num];
}
function get_data6(num) {
return data6[num];
}
function get_data7(num) {
return data7[num];
}
function get_data8(num) {
return data8[num];
}
function get_data9(num) {
return data9[num];
}
// スライドバーのデータ定義と取得関数（添え字によって4週間前、3週間前、2週間前、1週間前、現在を切替）
var bar_position = ['4週間前','3週間前','2週間前', '1週間前', '現在']
function get_bar_position(num) {
return bar_position[num];
}
// バブルチャート本体
var ctx = document.getElementById("myBubbleChart");
var myBubbleChart = new Chart(ctx, {
type: 'bubble',
data: {
datasets: [
{
label:"プロジェクト1",
backgroundColor: "rgba(128,128,0,0.8)",
data:get_data1(0)
},
{
label:"プロジェクト2",
backgroundColor: "rgba(255,255,0,0.8)",
data:get_data2(0)
},
{
label:"プロジェクト3",
backgroundColor: "rgba(0,255,255,0.8)",
data:get_data3(0)
},
{
label:"プロジェクト4",
backgroundColor: "rgba(0,255,0,0.8)",
data:get_data4(0)
},
{
label:"プロジェクト5",
backgroundColor: "rgba(255,0,0,0.8)",
data:get_data5(0)
},
{
label:"プロジェクト6",
backgroundColor: "rgba(0,0,255,0.8)",
data:get_data6(0)
},
{
label:"プロジェクト7",
backgroundColor: "rgba(0,128,0,0.8)",
data:get_data7(0)
},
{
label:"プロジェクト8",
backgroundColor: "rgba(128,0,128,0.8)",
data:get_data8(0)
},
{
label:"プロジェクト9",
backgroundColor: "rgba(0,0,128,0.8)",
data:get_data9(0)
}
]
},
options: {
title: {
display: true,
text: 'QCD状況（バブルが大きいほどコスト状況が悪い）'
},
scales: {
xAxes: [{
scaleLabel:{
display: true,
labelString: "進捗"
},
ticks: {
suggestedMax: 100,
suggestedMin: 0,
stepSize: 10,
callback: function(value, index, values){
return value + '%'
}
}
}],
yAxes: [{
scaleLabel:{
display: true,
labelString: "品質"
},
ticks: {
suggestedMax: 100,
suggestedMin: 0,
stepSize: 10,
callback: function(value, index, values){
return value + '%'
}
}
}]
}
},
})
//バーの位置によってバブルチャートに表示するデータを切り替える
function bubble_chart_move() {
let position = document.getElementById("slider_position").value; // sliderの値を取得
document.getElementById("val_position").textContent = get_bar_position(position); // 取得した値を"#val_position"のテキストに表示
myBubbleChart.data.datasets[0].data = get_data1(position)
myBubbleChart.data.datasets[1].data = get_data2(position)
myBubbleChart.data.datasets[2].data = get_data3(position)
myBubbleChart.data.datasets[3].data = get_data4(position)
myBubbleChart.data.datasets[4].data = get_data5(position)
myBubbleChart.data.datasets[5].data = get_data6(position)
myBubbleChart.data.datasets[6].data = get_data7(position)
myBubbleChart.data.datasets[7].data = get_data8(position)
myBubbleChart.data.datasets[8].data = get_data9(position)
myBubbleChart.update();
}
// スライダーを動かしたときのイベント
var sliders = document.getElementById("sliders");
sliders.addEventListener("input", function() {
bubble_chart_move();
}, false);
// スライドバーを一つ横に動かす。バーが右端まで来たら左端に戻る
var auto = function () {
// 今回はスライドバーの範囲を0~4と設定している
if (document.getElementById("slider_position").value < 4) {
// valueはSting型で保持されているので、プラス1する前にparseIntする
document.getElementById("slider_position").value = parseInt(document.getElementById("slider_position").value) + 1;
bubble_chart_move();
}
else {
document.getElementById("slider_position").value = 0;
bubble_chart_move();
}
}
// スタート/ストップボタンが押された時の処理
var auto_func;
var button_flag = 0; // 初期状態を0としておく
function button_fnc() {
// ボタンが押された時、button_flag = 0なら自動再生スタート
if (button_flag == 0) {
auto_func = setInterval("auto()",1000);
button_flag = 1;
}
// ボタンが押された時、button_flag = 1なら自動再生ストップ
else {
clearTimeout(auto_func);
button_flag = 0;
}
}
</script>
</body>
</html>
Author And Source
この問題について(chart.jsでバブルチャートをスライダー（スライドバー？）でグリグリ動かす後編), 我々は、より多くの情報をここで見つけました https://qiita.com/supinngassenn/items/ee0cf76d58adf2a300a7著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .