<!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(){//獲取頁面輸入?yún)?shù)，根據(jù)該參數(shù)獲取database的數(shù)據(jù)
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方法不會(huì)改變現(xiàn)有的數(shù)組，而僅僅會(huì)返回被連接數(shù)組的一個(gè)副本,所以要對(duì)數(shù)組重新賦值
}
config.data.datasets.forEach(function(dataset){
dataset.data=dataset.data.concat(add_data())
})
window.mychart.update();
})
</script>
</body>
</html>
add_x()返回的是一個(gè)數(shù)組，之前用push方法，結(jié)果顯示出來在一個(gè)橫軸點(diǎn)上；
改用concat（）方法之后，就可以正常的在橫軸上添加新的值了。但是這里要注意：
concat方法不會(huì)改變現(xiàn)有的數(shù)組，而僅僅會(huì)返回被連接數(shù)組的一個(gè)副本。
所以這里要用：
config.data.labels = config.data.labels.concat(add_x())
config.data.labels.concat(add_x()) //這樣的不正確，config.data.labels相當(dāng)于沒有變化
和
dataset.data=dataset.data.concat(add_data())
