chart.js-学习1

<!doctype html>
<html>
<head>
    <title>Line Chart - Combo Time Scale</title>
    <script src="../../../dist/Chart.js"></script>
    <script src="../../utils.js"></script>
    <script src="../../data.js"></script>
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
</head>
<body>
    <div style="width:75%;">
        <canvas id="canvas"></canvas>
    </div>
    <br>
    <br>
    <form id = "form" name = "form1">
        <br>
        <p>StartTime:<input type = "date" name = "begin_time" id = "begin_time" autofocus>EndTime:<input type = "date" id = "end_time" name = "end_time"></p>           
        <br>
        <input type = "radio" name = 'user' value = 'total_user' checked>Total User
        <input type = "radio" name = 'user' value = 'increase_user'>Increase User
    </form>
    <button id = "update">update</button>
    <script>
        function get_input(){//获取页面输入参数，根据该参数获取database的数据
            var StartTime = document.getElementById("begin_time").value;
            var EndTime = document.getElementById("end_time").value;
            var s = send_input(StartTime,EndTime)
            //alert(s);
        }

        var color = Chart.helpers.color;
        var config = {
            type: 'bar',
            data: {
                labels: get_x_axis(),
                datasets: [{
                    type: 'line',
                    label: 'Dataset 1',
                    backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
                    borderColor: window.chartColors.green,
                    fill: false,
                    data: get_y_axis(),
                },
                {type: 'bar',
                    label: 'Dataset 2',
                    backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
                    borderColor: window.chartColors.red,
                    fill: true,
                    data: get_y_axis(),
                },]
            }
        };
        window.onload = function() {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.mychart = new Chart(ctx, config);
        };
        document.getElementById("update").addEventListener("click",function(){
            if (config.data.datasets.length > 0){
                
                config.data.labels = config.data.labels.concat(add_x()) //concat方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本,所以要对数组重新赋值
            }
            config.data.datasets.forEach(function(dataset){
                dataset.data=dataset.data.concat(add_data())
                
            })
            
            window.mychart.update();
        })
    </script>
</body>
</html>

add_x()返回的是一个数组，之前用push方法，结果显示出来在一个横轴点上；
改用concat（）方法之后，就可以正常的在横轴上添加新的值了。但是这里要注意：
concat方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
所以这里要用：

config.data.labels = config.data.labels.concat(add_x()) 
config.data.labels.concat(add_x())   //这样的不正确，config.data.labels相当于没有变化

和

dataset.data=dataset.data.concat(add_data())

chart.js-学习1

推荐阅读更多精彩内容