Highcharts 官網：https://www.hcharts.cn/demo/highcharts
Highcharts API文檔：https://api.hcharts.cn/highcharts#yAxis.tickmarkPlacement
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, // 定義最小值
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里去。
下面是個例子：
01
var chart1option = {
02
chart: {
03
renderTo: 'sysThreadChart'//畫到id為sysThreadChart的div容器里
04
},
05
credits : {
06
enabled:false
07
},
08
title: {
09
text: 'Date Time Axis Test',
10
style: {
11
margin: '10px 100px 0 0'// center it
12
}
13
},
14
xAxis: {
15
type:"datetime",//時間軸要加上這個type，默認是linear
16
maxPadding : 0.05,
17
minPadding : 0.05,
18
//tickInterval : 24 * 3600 * 1000 * 2,//兩天畫一個x刻度
19
//或者150px畫一個x刻度，如果跟上面那個一起設置了，則以最大的間隔為准
20
tickPixelInterval : 150,
21
tickWidth:5,//刻度的寬度
22
lineColor : '#990000',//自定義刻度顏色
23
lineWidth :3,//自定義x軸寬度
24
gridLineWidth :1,//默認是0，即在圖上沒有縱軸間隔線
25
//自定義x刻度上顯示的時間格式，根據間隔大小，以下面預設的小時/分鍾/日的格式來顯示
26
dateTimeLabelFormats:
27
{
28
second: '%H:%M:%S',
29
minute: '%e. %b %H:%M',
30
hour: '%b/%e %H:%M',
31
day: '%e日/%b',
32
week: '%e. %b',
33
month: '%b %y',
34
year: '%Y'
35
}
36
},
37
//經測試，不能把時間值放到categories里，必須放到series的data里面去
38
//這樣是不行的：categories:[1274457600000,1274544000000,1274630400000]
39
//時間單位是毫秒，Unix時間戳乘上1000
40
series:[{
41
data:
42
[
43
[1274457600000, 1200],
44
[1274544000000, 1300],
45
[1274630400000, 1250],
46
[1274803200000,1350]
47
]
48
}]
49
};
50
51
$(document).ready(function() {
52
//真正的畫圖是這句
53
chart1= new Highcharts.Chart(chart1option);
54
});
畫出來是這樣的：
這個帖子也給了2個例子，似乎時間格式不一定使用時間戳也行？
有時間再整理一下其他hightcharts畫圖的例子，有點把它那個Options Reference翻譯一下的沖動。。。