Highcharts 非常實用的Javascript統計圖demo範例_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

Highcharts 非常實用的Javascript統計圖demo範例_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:30 PM

highchartsjavascript統計圖

Highcharts 官網：http://www.highcharts.com
Highcharts 官網範例：http://www.highcharts.com/demo/
Highcharts 官網文件：http://www.highcharts.com/documentation/ how-to-use
官網實例中給出了各式各樣的demo，可以參考document修改自己需要的即可。
下面是一個學生成績走勢demo：
Highcharts 非常實用的Javascript統計圖demo範例_javascript技巧

複製代碼代碼如下:

 
; 
 
 
 
Highcharts 範例 
 
 
$(function () { 
$('#container').highcharts({ 
圖表: { 
類型: '樣條線' 
}, 
標題: { 
text: '初三第一學期' 
}, 
xAxis: { 

type: 'datetime', 
labels: { 
formatter: function() { 
return Highcharts.dateFormat('%Y-%m-%d', this.value); 
 } 
} 
}, 
yAxis: { 
標題: { 
 text: '分數' 
}, 
min: 0 
}, 
tooltip : { 
//這種模式下，每個點的tooltip單獨顯示
shared: false, 
formatter: function() { 
var s = '' this.point. name '
>' Highcharts.dateFormat("%Y/% m/%d", this.point.x) ': ' this.point.y '分
'; 
return s ; 
} 
/**
這個模式下，兩點的tooltip顯示在一起
shared: true, 
formatter: function() { 
var s=''; 
$.each(this. points, function(i, point) { 
s = '' point.key '' '
' Highcharts.dateFormat("%Y/%m/%d", point .x) ': ' point.y '分
'; 
}); 
return s; 
} 
* / 
}, 
series: [{ 
name: 'English', 
// 定義資料點
// 1970/71，以便注意
// 在JavaScript 中，月份從0 開始表示一月，1 表示二月等等。 ) , 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:'高一第一學期第十九次考試'}, 
{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:'列' 
}, { 
名稱: '數學', 
資料: [ 
{'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:'高第一學期第12 次考試'} 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, 名稱:'高一第一學期第18次考試'}, 
] 
}] 
}); 
}); 

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Java vs JavaScript：開發人員的詳細比較May 16, 2025 am 12:01 AM

javaandjavascriptaredistinctlanguages：javaisusedforenterpriseandmobileapps，while javascriptifforInteractiveWebpages.1）JavaisComcompoppored，statieldinglationallyTypted，statilly tater astrunsonjvm.2）

JavaScript數據類型：瀏覽器和nodejs之間是否有區別？May 14, 2025 am 12:15 AM

JavaScript核心數據類型在瀏覽器和Node.js中一致，但處理方式和額外類型有所不同。 1)全局對像在瀏覽器中為window，在Node.js中為global。 2)Node.js獨有Buffer對象，用於處理二進制數據。 3)性能和時間處理在兩者間也有差異，需根據環境調整代碼。

JavaScript評論：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。