?轉自：http://www.cnblogs.com/gxll1314/archive/2010/10/11/1847770.html
做為系統開發應用不可缺少的部分，圖表可以使系統分析看起來更直觀，也可以使系統可以錦上添花，畢竟做統計比較繁瑣~使用java的程序員，通常使用jfreechart這個工具去作圖，唯一的缺憾是圖是靜態的jpg，缺乏靈性~其實前臺有很多這樣的圖形控件可以使用。這是個一系列的隨筆將介紹幾乎所有的前臺圖形報表的使用。本篇是開篇;
?? HighCharts是jQuery的一個插件，當前它并不像其他的jQuery插件那樣可以像這樣調用
?
view sourceprint?
| 1 | <SPAN style="TEXT-DECORATION: line-through">$(selector).method(); |
?
?
?? 而是采用new關鍵字
?
view sourceprint?
| 1 | var chart= new class(options); |
?? 先看一個基本的示例
?
view sourceprint?
| 02 | ????????????$(document).ready(function() { |
| 03 | ????????????????chart = new Highcharts.Chart({ |
| 04 | ????????????????????chart: { |
| 05 | ????????????????????????renderTo: 'container', |
| 06 | ????????????????????????defaultSeriesType: 'line', |
| 07 | ????????????????????????marginRight: 130, |
| 08 | ????????????????????????marginBottom: 25 |
| 10 | ????????????????????title: { |
| 11 | ????????????????????????text: 'Monthly Average Temperature', |
| 12 | ????????????????????????x: -20 //center |
| 14 | ????????????????????subtitle: { |
| 15 | ????????????????????????text: 'Source: WorldClimate.com', |
| 16 | ????????????????????????x: -20 |
| 18 | ????????????????????xAxis: { |
| 19 | ????????????????????????categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',? |
| 20 | ????????????????????????????'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] |
| 22 | ????????????????????yAxis: { |
| 23 | ????????????????????????title: { |
| 24 | ????????????????????????????text: 'Temperature (°C)' |
| 25 | ????????????????????????}, |
| 26 | ????????????????????????plotLines: [{ |
| 27 | ????????????????????????????value: 0, |
| 28 | ????????????????????????????width: 1, |
| 29 | ????????????????????????????color: '#808080' |
| 30 | ????????????????????????}] |
| 32 | ????????????????????tooltip: { |
| 33 | ????????????????????????formatter: function() { |
| 34 | ????????????????????????????????return '<b>'+ this.series.name +'</b><br/>'+ |
| 35 | ????????????????????????????????this.x +': '+ this.y +'°C'; |
| 36 | ????????????????????????} |
| 38 | ????????????????????legend: { |
| 39 | ????????????????????????layout: 'vertical', |
| 40 | ????????????????????????align: 'right', |
| 41 | ????????????????????????verticalAlign: 'top', |
| 42 | ????????????????????????x: -10, |
| 43 | ????????????????????????y: 100, |
| 44 | ????????????????????????borderWidth: 0 |
| 46 | ????????????????????series: [{ |
| 47 | ????????????????????????name: 'Tokyo', |
| 48 | ????????????????????????data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] |
| 49 | ????????????????????}, { |
| 50 | ????????????????????????name: 'New York', |
| 51 | ????????????????????????data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] |
| 52 | ????????????????????}, { |
| 53 | ????????????????????????name: 'Berlin', |
| 54 | ????????????????????????data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] |
| 55 | ????????????????????}, { |
| 56 | ????????????????????????name: 'London', |
| 57 | ????????????????????????data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] |
整個配置的關鍵部分在于series,chart,xAxis,yAxis;
series接受的數據格式為json Array：
view sourceprint?
注意：最后一個數據后面一定不能有逗號，否則在IE系列下會報錯，這個在幾乎所有的jQuery插件的配置中也會出現的問題，當IE報錯的時候，一定要檢查是否多寫了一個逗號
?
配置選項
chart：
renderTo//放置圖表的容器
defaultSeriesType//圖表類型line, spline, area, areaspline, column, bar, pie , scatter
xAxis,yAxis:
tickInterval: 15//自定義刻度
更多
常見的使用環境
1：我想顯示多個圖形報表。這些數據不是循環生成的！因為如果循環生成的話直接$.each就可以了！
view sourceprint?
因為大部分的配置屬性都是重復的，我們沒有必要每次都聲明。所以首先聲明一個通用的options，然后采用$.extend函數
?
注意，我們不希望更改原有的options對象，所以
view sourceprint?
| 1 | var o=$.exend({},options,{chart:{},xAxis:{}}) |
這樣o是options與第三個對象合并后的對象
?
view sourceprint?
| 18 | var o2=$.extend({},options,{data:{}}) |
| 21 | var chart=new Highcharts.Chart(o); |
| 22 | var chart2=new Highcharts.Chart(o2); |
?
2: 從服務器獲取數據動態生成運行曲線
曲線是從服務器獲取的點連接而成。我們將點輸出到報表上，連接就可以組成動態曲線。
使用的方法
配置chart:{
events:{
?? load:requestData
? }
} ,
series: [{ name: '服務器數據', data: [] }]
方法:
chart.series[0].addPoint([x,y], true, shift);
?
view sourceprint?
| 02 | $(document).ready(function(){ |
| 03 | ????chart = new Highcharts.Chart({ |
| 05 | ????????????renderTo: 'container', |
| 06 | ????????????defaultSeriesType: 'spline', |
| 08 | ????????????????load: requestData |
| 12 | ????????????formatter: function() { |
| 13 | ???????????????return ''+ this.series.name +'<br/>'+ |
| 14 | ????????????????'時間 : '+ this.x +'<br/>'+ |
| 15 | ????????????????'價格: '+ this.y; |
| 19 | ????????????text: '運行曲線' |
| 22 | ????????????//type: 'linear', |
| 23 | ????????????//tickPixelInterval: 10, |
| 24 | ????????????maxZoom: 60*3, |
| 26 | ????????????minPadding:0.2 |
| 29 | ????????????minPadding: 0.2, |
| 30 | ????????????maxPadding: 0.2, |
| 32 | ????????????????text: 'Value', |
| 33 | ????????????????margin: 80 |
| 37 | ????????????name: '服務器數據', |
| 40 | ????????????//name:"fuww", |
| 45 | function requestData() { |
| 47 | ????????url: 'orderAuction.action', |
| 48 | ????????success: function(point) { |
| 49 | ????????????var series = chart.series[0], |
| 50 | ????????????shift = series.data.length > 20; |
| 51 | ????????????var s=eval('('+point+')'); |
| 52 | ????????????var y=s.initial.price; |
| 53 | ????????????var z=s.initial.change; |
| 54 | ????????????chart.series[0].addPoint([x,y], true, shift); |
| 55 | ????????????// call it again after one second |
| 56 | ???????????timett = setTimeout('requestData()', 1000); |
| 57 | ???????????//timett = setInterval(requestData,1000); |
3:定義主題
?
最重要的是colors選項的顏色配置，按顯示順序配置即可！主題顯示效果
?
view sourceprint?
| 02 | ????colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'], |
| 05 | ????????????color: '#000', |
| 06 | ????????????font: 'bold 16px "Trebuchet MS", Verdana, sans-serif' |
| 11 | ????????????color: '#666666', |
| 12 | ????????????font: 'bold 12px "Trebuchet MS", Verdana, sans-serif' |
| 16 | ????????gridLineWidth: 1, |
| 17 | ????????lineColor: '#000', |
| 18 | ????????tickColor: '#000', |
| 21 | ????????????????color: '#000', |
| 22 | ????????????????font: '11px Trebuchet MS, Verdana, sans-serif' |
| 27 | ????????????????color: '#333', |
| 28 | ????????????????fontWeight: 'bold', |
| 29 | ????????????????fontSize: '12px', |
| 30 | ????????????????fontFamily: 'Trebuchet MS, Verdana, sans-serif' |
| 36 | ????????alternateGridColor: null, |
| 37 | ????????minorTickInterval: 'auto', |
| 38 | ????????lineColor: '#000', |
| 41 | ????????tickColor: '#000', |
| 44 | ????????????????color: '#000', |
| 45 | ????????????????font: '11px Trebuchet MS, Verdana, sans-serif' |
| 50 | ????????????????color: '#333', |
| 51 | ????????????????fontWeight: 'bold', |
| 52 | ????????????????fontSize: '12px', |
| 53 | ????????????????fontFamily: 'Trebuchet MS, Verdana, sans-serif' |
| 59 | ????????????font: '9pt Trebuchet MS, Verdana, sans-serif', |
| 60 | ????????????color: 'black' |
| 63 | ????????itemHoverStyle: { |
| 64 | ????????????color: '#039' |
| 66 | ????????itemHiddenStyle: { |
| 67 | ????????????color: 'gray' |
| 72 | ????????????color: '#99b' |
應用主題
?
view sourceprint?
| 1 | Highcharts.setOptions(theme); |
4：餅形圖的計算
?
餅形圖是按照百分比去生成的，不論是后臺計算還是前臺計算，我們需要將其百分比的總和為100%,所以為了不那么錯誤的計算，應該使用四舍五入的形式，最后一個數據=100-前面總和。
5: 基本的圖形報表參見官方示例
轉載于:https://www.cnblogs.com/millen/archive/2011/04/17/2019144.html
總結
以上是生活随笔為你收集整理的(jQuery,Highcharts)前端图表系列之一 --Highcharts (转)的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
