Highcharts的部分屬性與Y軸數據值刻度顯示Y軸最小最大值

Highcharts.setOptions({global:{useUTC : false}});  
$(function(){    
    //聲明報表對象    
    var chart = new Highcharts.Chart({    
        chart: {  
        renderTo: 'container', // 報表顯示在 頁面位置 container 爲 div 定義的屬性  
        defaultSeriesType: 'spline', // 定義報表類型 例如：line ，spline ，colume  
        events: {  
                load:  getForm  //調用js 方法  
            }  
        },  
        title:{  
            text:'實時監測曲線圖" //定義曲線報表 名稱  
        },  
        xAxis: {  
            type: 'datetime', // 定義時間軸的 類型  
            maxPadding : 0.05,  
            minPadding : 0.05,  
            tickWidth:1,//刻度的寬度  
            lineWidth :1,//自定義x軸寬度  
            gridLineWidth :1,//默認是0，即在圖上沒有縱軸間隔線  
            lineColor : '#990000'     
        },  
        yAxis: {  
                max:12, // 定義Y軸 最大值  
                min:0, // 定義最小值(若是隻定義了最小值,而沒有定義最大值,則Y軸的刻度會根據series中全部的Y值自動計算)  
                minPadding: 0.2,   
                maxPadding: 0.2,  
                tickInterval:1, // 刻度值  
                title: {  
                    text: 'PH值'  
                },  
                // plotLines 表示爲定義曲線報表中的 （刻度線）或者叫作（定義的區間範圍）  
// 一下爲2條表示線  
                plotLines: [{   
                            value: 6,  
                            color: 'green',  
                            dashStyle: 'shortdash',  
                            width: 2,  
                            label: {  
                                text: '正常'  
                            }  
                        },{  
                            value: 8,  
                            color: 'green',  
                            dashStyle: 'shortdash',  
                            width: 2,  
                            label: {  
                                text: '正常'  
                            }  
                        }  
                }]  
        },  
        tooltip: {  // 表示爲 鼠標放在報表圖中數據點上顯示的數據信息  
            formatter: function() {  
                  return '<b>'+'日期:' +'</b>'  
+Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+  
                   '<b>'+'<%=lbname%>:' +'</b>'+ this.y+'  <%=shll%>';  
            }  
        },  
        series: [{  
            name: 'PH',  
            data: [] // 此處存放數據值 用,分開 例如：1.8,8.9,null,9.2,   若是在某一點數據爲空    
//能夠用null 來表示   
            //若是是想動態扶植  這個位置 應該爲空 即：data: []  
        }]  
    });    
    // 與後臺進行數據交互  
    function getForm(){    
        jQuery.getJSON("test!test.do?id=123456", null, function(data) {     
            //爲圖表設置值     
            chart.series[0].setData(data);     
        });       
    }    
    //定時刷新 列表數據  
   $(document).ready(function() {    
       //每隔3秒自動調用方法，實現圖表的實時更新    
       window.setInterval(getForm,50000);     
   });    
});  
  
//定義 曲線報表圖 的樣式  
    Highcharts.theme = {  
       colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',  
 '#FFF263', '#6AF9C4'],  
       chart: {  
          backgroundColor: {  
             linearGradient: [0, 0, 500, 500],  
             stops: [  
                [0, 'rgb(255, 255, 255)'],  
                [1, 'rgb(240, 240, 255)']  
             ]  
          },  
          borderWidth: 2,  
          plotBackgroundColor: 'rgba(255, 255, 255, .9)',  
          plotShadow: true,  
          plotBorderWidth: 1  
       },  
       title: {  
          style: {   
             color: '#000',  
             font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'  
          }  
       },  
       subtitle: {  
          style: {   
             color: '#666666',  
             font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'  
          }  
       },  
       xAxis: {  
          gridLineWidth: 1,  
          lineColor: '#000',  
          tickColor: '#000',  
          labels: {  
             style: {  
                color: '#000',  
                font: '11px Trebuchet MS, Verdana, sans-serif'  
             }  
          },  
          title: {  
             style: {  
                color: '#333',  
                fontWeight: 'bold',  
                fontSize: '12px',  
                fontFamily: 'Trebuchet MS, Verdana, sans-serif'  
  
             }              
          }  
       },  
       yAxis: {  
          //minorTickInterval: 'auto'  // 此處會在Y軸座標2點以前出現小格  因此就沒有使用。  
       },  
       legend: {  
          itemStyle: {           
             font: '9pt Trebuchet MS, Verdana, sans-serif',  
             color: 'black'  
          },  
          itemHoverStyle: {  
             color: '#039'  
          },  
          itemHiddenStyle: {  
             color: 'gray'  
          }  
       },  
       labels: {  
          style: {  
             color: '#99b'  
          }  
       }  
    };  
    var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

經常使用的文檔說明：

1.chart：

renderTo 圖表的頁面顯示容器

defaultSeriesType 圖表的顯示類型（line,spline, scatter, splinearea bar,pie,area,column）

margin 上下左右空隙

events 事件

click function(e) {}

load function(e) {}

2.xAxis：yAxis:

屬性：

gridLineColor 網格顏色

reversed 是否反向 true ,false

gridLineWidth 網格粗細

startOnTick 是否從座標線開始畫圖區域

endOnTick 是否從座標線結束畫圖區域

tickmarkPlacement 座標值與座標線標記的對齊方式on,between

tickPosition 座標線標記的樣式 向內延伸仍是向外延伸(insidel,outside)

tickPixelInterval 決定着橫座標的密度

tickColor 座標線標記的顏色

tickWidth 座標線標記的寬度

lineColor 基線顏色

lineWidth 基線寬度

max 固定座標最大值

min 固定座標最小值

plotlines 標線屬性

maxZoom

minorGridLineColor

minorGridLineWidth

/minorTickColor

title： 

enabled： 是否顯示

text： 座標名稱

Labels 座標軸值顯示類 默認：defaultLabelOptions

formatter 格式化函數

enabled 是否顯示座標軸的座標值

rotation 傾斜角度

align 與座標線的水平相對位置

x 水平偏移量

y 垂直偏移量

style 

font 字體樣式 默認defaultFont

color 顏色

3.Tooltip 數據點的提示框

enabled 鼠標通過時是否可動態呈現true,false

formatter 格式化提示框的內容樣式

4.plotOptions 畫各類圖表的數據點的設置

defaultOptions 默認設置

屬性

Area類:

lineWidth 線寬度

fillColor area的填充顏色組

marker{} 設置動態屬性

shadow 是否陰影 true,false

states 設置狀態？

Line類

dataLabels: 數據顯示類

enabled 是否直接顯示點的數據true,false

5.series

name 該條曲線名稱

data[] 該條曲線的數據項

addPoint([x,y],redraw,cover) 添加描點，redraw 是否重畫，cover是否左移

setData: function(data, redraw) 從新設置Data數組，redraw是否重畫

remove: function(redraw) 刪除曲線

redraw: function() 重畫曲線

marker ：

enabled 是否顯示描點

http://www.highcharts.com是一個很強大的js畫圖工具，這幾天把它用在項目裏。

有個問題一直困擾我，在畫曲線圖的時候，橫軸想讓它顯示成時間格式，怎麼搞都不行。若是直接用字符串方式顯示，一條線上數據點不少的時候，就都擠到一塊兒去了。

這玩意中文資料不多，去它官網論壇逛了逛，後來發現，xAxis若是想設置成datetime，時間數據是不能放到categories裏的，要放到series裏去。

下面是個例子：

 var chart1option = {
            chart: {
                renderTo: 'sysThreadChart'//畫到id爲sysThreadChart的div容器裏
            },
            credits : {
                enabled:false
            },
            title: {
                text: 'Date Time Axis Test',
                style: {
                    margin: '10px 100px 0 0'// center it
                }
            },
            xAxis: {
                type:"datetime",//時間軸要加上這個type，默認是linear
                maxPadding : 0.05,
                minPadding : 0.05,
                //tickInterval : 24 * 3600 * 1000 * 2,//兩天畫一個x刻度
                //或者150px畫一個x刻度，若是跟上面那個一塊兒設置了，則以最大的間隔爲準
                tickPixelInterval : 150,
                tickWidth:5,//刻度的寬度
                lineColor : '#990000',//自定義刻度顏色
                lineWidth :3,//自定義x軸寬度
                gridLineWidth :1,//默認是0，即在圖上沒有縱軸間隔線
                //自定義x刻度上顯示的時間格式，根據間隔大小，如下面預設的小時/分鐘/日的格式來顯示
                                dateTimeLabelFormats:
                {
                    second: '%H:%M:%S',
                    minute: '%e. %b %H:%M',
                    hour: '%b/%e %H:%M',
                    day: '%e日/%b',
                    week: '%e. %b',
                    month: '%b %y',
                    year: '%Y'
                }
            },
//經測試，不能把時間值放到categories裏，必須放到series的data裏面去
//這樣是不行的：categories:[1274457600000,1274544000000,1274630400000]
//時間單位是毫秒，Unix時間戳乘上1000
            series:[{
                    data:
                    [
                        [1274457600000, 1200],
                        [1274544000000, 1300],
                        [1274630400000, 1250],
                        [1274803200000,1350]
                    ]
                    }]
        };
    $(document).ready(function() {
                //真正的畫圖是這句
        chart1= new Highcharts.Chart(chart1option);
    });

畫出來是這樣的：

這個帖子也給了2個例子，彷佛時間格式不必定使用時間戳也行？

有時間再整理一下其餘hightcharts畫圖的例子，有點把它那個Options Reference翻譯一下的衝動。。。

附上其餘一些關於hightcharts的網址:
http://www.hcharts.cn/docs/index.php?doc=basic-series; 
http://www.lxway.com/62125684.htm;
http://www.jb51.net/article/39455.htm; 
http://blog.csdn.net/gzh0222/article/details/24543647; 
http://www.cnblogs.com/liuhaorain/archive/2012/01/24/2311352.html;

固然,series中的data數據是能夠從服務器獲取的,例如項目中的代碼:

series : [ 
    {
	name : '訂單數',
	data:getSeriesData2(seriesData,"訂單數"),
    }]
/**
 * 動態的設置Highcharts的顯示值
 * param 格式爲從Action返回給頁面的一個List<String>
 * @returns {Array}
 */
function getSeriesData2(param,param1){
	var returnData = [];
	actionData = param;
	if(actionData != null && actionData != ""){
		actionData = actionData.substring(1,actionData.length-1);
		var data = actionData.split(",");
		for(var i = 0;i<data.length;i++){
			//得到每組數組,數組0爲訂單數量;數組1爲年月
			var subData = data[i].split(";");
			//分割年月(2015-1)
			var yearAndMonth = subData[1].split("-");
			var obj = {};
			obj.x = Date.UTC(yearAndMonth[0],yearAndMonth[1]);
			obj.y = parseFloat(subData[0]);//注意在動態賦值的時候:由於Y軸只能識別數字,因此這裏須要把字符串subData[0]轉換成數字
			obj.name = param1;
			returnData.push(obj);
		}
	}
	return returnData;
}