笔记———在毕设中使用chart.js

最近让我的毕设主页大变样，虽然说很早一段时间就弄好了，但没写博客

也就是这样，点击了之后在隔壁栏会反馈显示你点击后得到的信息。

我去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！