下载：自行下载
前端页面：
<!doctype html>
<html>
<head>
<title>Line Chart</title>
<script src=”./Chart.min.js”></script>
<script src=”./%20jquery .min.js”></script>
</head>
<body>
<div style=”width:30%”>
<div>
< canvas id=”canvas” height=”650″ width=”800″></canvas>
</div>
</div>
<script>
var randomScalingFactor = function () {
return Math.round(Math.random() * 100)
};
var lineChartData = {
labels: ”,
datasets: [
{
label: “My First dataset”,
fillColor: “rgba(220,220,220,0.2)”,
strokeColor: “rgba(220,220,220,1)”,
pointColor: “rgba(220,220,220,1)”,
pointStrokeColor: “#fff”,
pointHighlightFill: “#fff”,
pointHighlightStroke: “rgba(220,220,220,1)”,
data: ”
}
]
}
//异步请求
$. ajax ({
type: “get”,
url: “chartRequest.php”,
async : false, //同步请求方式
data:{
date:’5-25′
},
success: function ( msg ) {
//注：服务器端返回的msg是” JSON 字符串 “，需将其转换为JavaScript对象
reponseData = JSON.parse(msg);
lineChartData.labels = reponseData.labels;
var datasets = lineChartData.datasets;
datasets[0][‘data’] = reponseData.data;
}
});
window.onload = function () {
var ctx = document.getElementById(“canvas”).getContext(“2d”);
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
}
</script>
</body>
</html>
服务端接口：
<?php
$labels = array(‘5-21′,’5-22′,’5-23′,’5-24′,’5-25′,’5-26′,’5-27′,’5-28′,’5-29’);
$data = array(‘1′,’5′,’59’,’10’,’15’,’96’,’27’,’156′,’100′);
$msg[‘labels’] = $labels;
$msg[‘data’] = $data;
echo json_encode($msg);//将二维数组转换为”JSON 字符串”
