Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@supinngassenn

chart.jsでバブルチャートをスライダー（スライドバー？）でグリグリ動かす後編

Posted at

目指す姿（後編）

以下のように、chart.jsのバブルチャートをスライダーでグリグリ動かすだけでなく、「スタート/ストップ」ボタンによってそのスライダーを自動再生させる。（＆ループさせる）

03_bubblechart_add_auto_play.gif

スライダーを作成するところまでは前回の記事に記載しましたので、良ければそちらもご覧下さい！
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>
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?