Chart.js – Multiple Line Charts

這個 Chart.js 真的很神奇又好用。之前是挑戰只顯這示一組圖，這次要挑戰在同一個畫面裡顯示 2張圖表，範例程式如下：

    <div id="canvas-holder" style="width:40%">
        <canvas id="chart-area1" />
    </div>
    <hr/>
    <div id="canvas-holder" style="width:40%">
        <canvas id="chart-area2" />
    </div>

    <script>
    var config = {
        type: 'pie',
        data: {
            datasets: [{
                data: [
                    60,
                    70,
                ],
                backgroundColor: [
                    window.chartColors.yellow,
                    window.chartColors.green,
                ],
                label: 'Platform'
            }],
            labels: [
                "iOS",
                "Android"
            ]
        },
        options: {
            responsive: true
        }
    };

    window.onload = function() {
        var ctx1 = document.getElementById("chart-area1").getContext("2d");
        window.myPie = new Chart(ctx1, config);
        
        var ctx2 = document.getElementById("chart-area2").getContext("2d");
        window.myPie = new Chart(ctx2, config);
    };

    var colorNames = Object.keys(window.chartColors);
    </script>

執行畫面：