chart.js-学习1
2016-12-27 本文已影响525人
alisazhou
<!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())
