最近让我的毕设主页大变样,虽然说很早一段时间就弄好了,但没写博客
也就是这样,点击了之后在隔壁栏会反馈显示你点击后得到的信息。
我去chart的官网上copy了一份示例然后对上面进行修改,然后与的功能相结合就是这样啦。
// A code block
var myline;
var temperature,humidity,date;
var config = {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: '温度',
backgroundColor: window.chartColors.red,
borderColor: window.chartColors.red,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
fill: false,
}, {
label: '湿度',
fill: false,
backgroundColor: window.chartColors.blue,
borderColor: window.chartColors.blue,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
}
}
};
window.onload = function() {
var ctx = document.getElementById('myChart').getContext('2d');
myLine = new Chart(ctx, config);
//在打开的时候就更新一下,懒得重写的直接替代方法
upchartdata();
};
function upchartdata(){
//用foreach是因为有两个数据,用花括号可以折叠
{ /*config.data.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
});
dataset.data = [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
];
});*/}
//更新数据的话,可以通过直接赋值来更新
//在这里可以用ajax链接到php连接mysql数据库来获取数据
//并将数据放在temperature,humidity,date
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var rt = xmlhttp.responseText;
//rt = JSONObject.fromObject(rt).toString();
var data = eval("("+rt+")");
config.data.labels = data[2];
config.data.datasets[0].data = data[0];
config.data.datasets[1].data = data[1];
myLine.update();
}
}
xmlhttp.open("GET","database.php",true);
xmlhttp.send();
}
通过Ajax的方式,实现点击后去获取数据库里的信息,然后再将原本图表里的数据进行更新,然后好一招移花接木,这样就完成了图表的绘制。
不过过程没有这么简单,我没学过chart.js的,然后也不怎么看得懂JS,不过基本意思语句都会,不会就上网补基础,大致知道实现什么功能这样的,有天吃饭的时候,突然想到,啊,直接赋值怎么样?然后就回到宿舍,另建了个文件一试,还真可以。然后后来就用Ajax来连接php,php连接mysql。
不过昨天电脑坏了,数据丢失(有一大半我的原因),又得重下软件和搞数据库了。难顶
同时纪念第一次将项目传GitHub上,great!