由於項目的需要，我們想要了解觀衆對一部電影的評分是否與時間存在一定的關係，以此判斷時間能否成爲我們探討一部電影口碑的要素，我們是否有必要關注時間。於是我接觸到了highcharts，一個畫圖工具。雖然只是很單純地接觸，很簡單地應用了一次，還是覺得有些東西值得做點記錄，萬一以後又要用到了呢。
這是highcharts各部分基本組成名稱：
highcharts的代碼寫在中，最後放在html框架中，保存爲.html的文件，打開即可看到圖片。
這是我最後的效果：
這是我最後的代碼：
<!doctype html>
<html lang="en">
<head>
//highcharts的運行需要引入兩個js文件，highcharts.js及js框架（主流jquery)
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
</script>
<script>
$(function () { //注意這裏的id（即container）必須與下面body的相同，說明這個圖要放的位置
$('#container').highcharts({
chart: {
//圖表類型，有line spline等
type: 'scatter',
//縮放配置
zoomType: 'xy'
},
//圖表標題，如果不需要可以不寫這一項或者直接設爲空字符串
title: {
text: 'Score very with time'
},
// x軸的設置
xAxis: {
//categories x軸的座標
categories:['1.16', '1.17', '1.18', '1.19', '1.20', '1.21', '1.22', '1.23', '1.24', '1.25', '1.26', '1.27', '1.28', '1.29', '1.31', '2.01', '2.02', '2.03', '2.04', '2.05', '2.06', '2.07', '2.08', '2.09', '2.10', '2.11', '2.12', '2.14', '2.15', '2.16', '2.17', '2.18', '2.19', '2.20', '2.21', '2.22', '2.23', '2.25', '2.26', '2.27', '3.03', '3.05', '3.12', '3.14', '3.16', '3.19', '3.21', '3.26', '4.04', '4.08', '4.11', '4.19', '4.20', '4.28', '4.30', '5.02', '5.03', '5.07', '5.09', '5.18', '5.19', '5.21', '5.27'],
title: {
enabled: true,
text: 'Time (month.day)' //x軸是時間軸
}
},
//y軸設置
yAxis: {
title: {
text: 'Score' //y軸是分數軸
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
//對於所有的圖表都可以適用的配置參數，屬於共有性質。
//裏面的設置不是一下子能說清楚的那種，屬於對圖表更細緻的設定如是否允許標記符的鼠標經過狀態啊這些，不詳講～
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
//散點說明標籤，即鼠標碰上去後會顯示的內容
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x}, {point.y} '
} //有點遺憾和不解的是,point.x最後顯示的是計數，我不知道這裏應該怎麼設置，可以使顯示的x是x軸的時間數
}
},
//數據源配置，可以以(x,y)的形式把所有的數據都放在這裏。也可以把x值寫在上面的xAis
series: [{
color: 'rgba(119, 152, 191, .5)',
data: [4.0, 6.0, 6.22, 5.8, 6.44, 5.75, 5.43, 6.55, 6.0, 5.25, 5.33, 4.0, 6.0, 8.0, 6.0, 7.0, 6.67, 6.0, 6.0, 5.5, 2.0, 6.0, 6.67, 4.0, 4.0, 6.0, 6.0, 7.0, 4.0, 6.0, 6.0, 5.0, 6.5, 6.0, 4.0, 6.5, 6.0, 6.0, 6.0, 2.0, 5.0, 8.0, 7.0, 6.0, 2.0, 3.0, 8.0, 6.0, 8.0, 5.0, 8.0, 6.0, 6.0, 6.0, 8.0, 6.0, 8.0, 8.0, 10.0, 6.0, 6.0, 6.0, 6.0]
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width:700px;height:400px"></div>
</body>
</html>感覺highcharts是不錯的畫圖工具，其學習方法應該同html等差不多，有一定的代碼格式，但主要是記憶標籤。但是要注意啊，由於沒有專門的編譯器，少個逗號括號什麼的不報錯卻就出不了結果了，自己有很多次就是改了數據後沒有加逗號所以出不了圖＝＝。