Highcharts属性

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 ''+'日期:' +''
+Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +' '+
''+'<%=lbname%>:' +''+ 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：

1renderTo 图表的页面显示容器  
2defaultSeriesType 图表的显示类型（line,spline, scatter, splinearea bar,pie,area,column）  
3margin 上下左右空隙  
4events 事件  
5click function(e) {}  
6load function(e) {}  
7  
82.xAxis：yAxis:  
9属性：  
10gridLineColor 网格颜色  
11reversed 是否反向 true ,false  
12gridLineWidth 网格粗细  
13startOnTick 是否从坐标线开始画图区域  
14endOnTick 是否从坐标线结束画图区域  
15tickmarkPlacement 坐标值与坐标线标记的对齐方式on,between  
16tickPosition 坐标线标记的样式 向内延伸还是向外延伸(insidel,outside)  
17tickPixelInterval 决定着横坐标的密度  
18tickColor 坐标线标记的颜色  
19tickWidth 坐标线标记的宽度  
20lineColor 基线颜色  
21lineWidth 基线宽度  
22max 固定坐标最大值  
23min 固定坐标最小值  
24plotlines 标线属性  
25maxZoom  
26minorGridLineColor  
27minorGridLineWidth  
28/minorTickColor  
29title：   
30enabled： 是否显示  
31text： 坐标名称  
32Labels 坐标轴值显示类 默认：defaultLabelOptions  
33formatter 格式化函数  
34enabled 是否显示坐标轴的坐标值  
35rotation 倾斜角度  
36align 与坐标线的水平相对位置  
37x 水平偏移量  
38y 垂直偏移量  
39style   
40font 字体样式 默认defaultFont  
41color 颜色

154.
3.Tooltip 数据点的提示框
enabled 鼠标经过时是否可动态呈现true,false
formatter 格式化提示框的内容样式

14.plotOptions 画各种图表的数据点的设置  
2defaultOptions 默认设置  
3属性  
4Area类:  
5lineWidth 线宽度  
6fillColor area的填充颜色组  
7marker{} 设置动态属性  
8shadow 是否阴影 true,false  
9states 设置状态？  
10Line类  
11dataLabels: 数据显示类  
12enabled 是否直接显示点的数据true,false

155.
5.series
name 该条曲线名称
data[] 该条曲线的数据项
addPoint([x,y],redraw,cover) 添加描点，redraw 是否重画，cover是否左移
setData: function(data, redraw) 重新设置Data数组，redraw是否重画
remove: function(redraw) 删除曲线
redraw: function() 重画曲线
marker ：
enabled 是否显示描点

评论区

相关推荐