DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Highcharts 非常實用的Javascript統計圖demo示例
Highcharts 非常實用的Javascript統計圖demo示例
編輯：關於JavaScript     
Highcharts 官網：http://www.highcharts.com
Highcharts 官網示例：http://www.highcharts.com/demo/
Highcharts 官網文檔：http://www.highcharts.com/documentation/how-to-use
官網實例中給出了各式各樣的demo，可以參照document修改自己需要的即可。
下面是一個學生成績走勢demo：
 
復制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: '初三第一學期'
},
xAxis: {

type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
}
}
},
yAxis: {
title: {
text: '分數'
},
min: 0
},
tooltip: {
//這種模式下，每點的tooltip單獨顯示
shared: false,
formatter: function() {
var s = '<b>'+ this.point.name +'</b>'+'<br/>'+ Highcharts.dateFormat("%Y/%m/%d", this.point.x) +': '+this.point.y +'分<br/>';
return s;
}
/**
這種模式下，兩個點的tooltip顯示在一起
shared: true,
formatter: function() {
var s='';
$.each(this.points, function(i, point) {
s += '<b>'+ point.key +'</b>'+'<br/>'+ Highcharts.dateFormat("%Y/%m/%d", point.x) +': '+point.y +'分<br/>';
});
return s;
}
*/
},
series: [{
name: '英語',
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.

data: [
{x:Date.UTC(1970, 9, 27), y:55, name:'高一第一學期第一次考試'},
{x:Date.UTC(1970, 10, 10), y:60, name:'高一第一學期第二次考試'},
{x:Date.UTC(1970, 10, 18), y:70, name:'高一第一學期第三次考試'},
{x:Date.UTC(1970, 11, 2), y:80, name:'高一第一學期第四次考試'},
{x:Date.UTC(1970, 11, 9), y:60, name:'高一第一學期第五次考試'},
{x:Date.UTC(1970, 11, 16), y:60, name:'高一第一學期第六次考試'},
{x:Date.UTC(1970, 11, 28), y:67, name:'高一第一學期第七次考試'},
{x:Date.UTC(1971, 0, 1), y:81, name:'高一第一學期第八次考試'},
{x:Date.UTC(1971, 0, 8), y:78, name:'高一第一學期第九次考試'},
{x:Date.UTC(1971, 0, 12), y:98, name:'高一第一學期第十次考試'},
{x:Date.UTC(1971, 0, 27), y:84, name:'高一第一學期第十一次考試'},
{x:Date.UTC(1971, 1, 10), y:80, name:'高一第一學期第十二次考試'},
{x:Date.UTC(1971, 1, 18), y:80, name:'高一第一學期第十三次考試'},
{x:Date.UTC(1971, 1, 24), y:92, name:'高一第一學期第十四次考試'},
{x:Date.UTC(1971, 2, 4), y:49, name:'高一第一學期第十五次考試'},
{x:Date.UTC(1971, 2, 11), y:79, name:'高一第一學期第十六次考試'},
{x:Date.UTC(1971, 2, 15), y:73, name:'高一第一學期第十七次考試'},
{x:Date.UTC(1971, 2, 25), y:61, name:'高一第一學期第十八次考試'},
{x:Date.UTC(1971, 3, 2), y:76, name:'高一第一學期第19次考試'},
{x:Date.UTC(1971, 3, 6), y:82, name:'高一第一學期第20次考試'},
{x:Date.UTC(1971, 3, 13), y:84, name:'高一第一學期第21次考試'},
{x:Date.UTC(1971, 4, 3), y:10, name:'高一第一學期第22次考試'},
{x:Date.UTC(1971, 4, 26), y:19, name:'高一第一學期第23次考試'},
{x:Date.UTC(1971, 5, 9), y:25, name:'高一第一學期第24次考試'},
{x:Date.UTC(1971, 5, 12), y:55, name:'高一第一學期第25次考試'}
]
//,type:'column'
}, {
name: '數學',
data: [
{'x':Date.UTC(1970, 9, 18), 'y':45, 'name':'高一第一學期第1次考試'},
{x:Date.UTC(1970, 9, 27), y:29, name:'高一第一學期第2次考試'},
{x:Date.UTC(1970, 11, 1), y:47, name:'高一第一學期第3次考試'},
{x:Date.UTC(1970, 11, 11), y:55, name:'高一第一學期第4次考試'},
{x:Date.UTC(1970, 11, 25), y:38, name:'高一第一學期第5次考試'},
{x:Date.UTC(1971, 0, 8), y:38, name:'高一第一學期第6次考試'},
{x:Date.UTC(1971, 0, 15), y:38, name:'高一第一學期第7次考試'},
{x:Date.UTC(1971, 1, 1), y:38, name:'高一第一學期第8次考試'},
{x:Date.UTC(1971, 1, 8), y:48, name:'高一第一學期第9次考試'},
{x:Date.UTC(1971, 1, 21), y:58 ,name:'高一第一學期第10次考試'},
{x:Date.UTC(1971, 2, 12), y:89, name:'高一第一學期第11次考試'},
{x:Date.UTC(1971, 2, 25), y:70, name:'高一第一學期第12次考試'},
{x:Date.UTC(1971, 3, 4), y:94, name:'高一第一學期第13次考試'},
{x:Date.UTC(1971, 3, 9), y:91, name:'高一第一學期第14次考試'},
{x:Date.UTC(1971, 3, 13), y:75, name:'高一第一學期第15次考試'},
{x:Date.UTC(1971, 3, 19), y:66 ,name:'高一第一學期第16次考試'},
{x:Date.UTC(1971, 4, 25), y:65 ,name:'高一第一學期第17次考試'},
{x:Date.UTC(1971, 4, 31), y:35, name:'高一第一學期第18次考試'},
{x:Date.UTC(1971, 5, 7), y:56, name:'高一第一學期第19次考試'}
]
}, {
name: '語文',
data: [
{x:Date.UTC(1970, 9, 9), y: 0, name:'高一第一學期第1次考試'},
{x:Date.UTC(1970, 9, 14), y:15, name:'高一第一學期第2次考試'},
{x:Date.UTC(1970, 10, 28), y:35, name:'高一第一學期第3次考試'},
{x:Date.UTC(1970, 11, 12), y:46, name:'高一第一學期第4次考試'},
{x:Date.UTC(1971, 0, 1), y:59, name:'高一第一學期第5次考試'},
{x:Date.UTC(1971, 0, 24), y:58, name:'高一第一學期第6次考試'},
{x:Date.UTC(1971, 1, 1), y:62, name:'高一第一學期第7次考試'},
{x:Date.UTC(1971, 1, 7), y:65, name:'高一第一學期第8次考試'},
{x:Date.UTC(1971, 1, 23), y:77, name:'高一第一學期第9次考試'},
{x:Date.UTC(1971, 2, 8), y:77, name:'高一第一學期第10次考試'},
{x:Date.UTC(1971, 2, 14), y:79, name:'高一第一學期第11次考試'},
{x:Date.UTC(1971, 2, 24), y:86, name:'高一第一學期第12次考試'},
{x:Date.UTC(1971, 3, 4), y:80, name:'高一第一學期第13次考試'},
{x:Date.UTC(1971, 3, 18), y:94, name:'高一第一學期第14次考試'},
{x:Date.UTC(1971, 3, 24), y:98, name:'高一第一學期第15次考試'},
{x:Date.UTC(1971, 4, 16), y:39, name:'高一第一學期第16次考試'},
{x:Date.UTC(1971, 4, 21), y: 0, name:'高一第一學期第18次考試'},
]
}]
});
});

</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="max-width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
關於JavaScript
NodeJS的Promise的用法解析
Javascript的特點是異步，Javascript不能等待，如果你實現某件需要等待的事情，你不能
移動端使用localStorage緩存Js和css文的方法(web開發)
將jquery和公共樣式緩存到localStorage，可以減少Http請求，從而優化頁面加載時間，
js 通過cookie實現刷新不變化樹形菜單
通過設置cookie來保存樹形菜單的狀態，在頁面加載時重新讀取cookie來設置菜單。菜單的HTML

相關文章

JavaScript基礎知識JSON基礎正則表達式關於JavaScriptJavaScript技巧jQuery入門知識AJAX入門JavaScript綜合知識
小編推薦
JS使用ajax方法獲取指定url的head信息中指定字段值的方法教程 JavaScript組成、引入、輸出、運算符基礎知識講解 javascript下漢字和Unicode編碼互轉代碼 javascript實現點擊後變換按鈕顯示文字的方法 js無法獲取到html標簽的屬性的解決方法 基於jQuery+PHP+Mysql實現在線拍照和在線浏覽照片 怎麼清空javascript數組 Javascript在IE和FF裡的兼容問題 JS驗證日期的格式YYYY-mm-dd 具體實現 給Flash加一個超鏈接(推薦使用透明層)兼容主流浏覽器
熱門推薦
JS控制表格實現一條光線流動分割行的方法 Nodejs中調用系統命令、Shell腳本和Python腳本的方法教程和實例教程 JavaScript通過join函數連接數組裡所有元素的方法 event.X和event.clientX的區別分析 javascript之with的使用(阿裡雲、淘寶使用代碼分析) 簡單實現js浮動框 JS獲取後台Cookies值的小例子 gameboy網頁闖關游戲(riddle webgame)--仿微信聊天的前端頁面設計和難點 node+express+jade制作簡單網站指南
大家都在看
JavaScript中的分號插入機制詳細介紹 XML卷之實戰錦囊(5)結構樹圖 九種js彈出對話框的方法總結 java接口中定義的常量的訪問方法 Form表單標簽的Enctype屬性的作用及應用示例介紹 ajax實現頁面加載和內容刪除 javascript實現數獨解法 好玩的鼠標指向後帶圖片的提示效果
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved