Highcharts属性

时间 2019-11-09

标签 highcharts 属性繁體版

原文原文链接

Highcharts.setOptions({global:{useUTC : false}}); 数组
$(function(){ ide
//声明报表对象函数
var chart = new Highcharts.Chart({ 字体
chart: { this
renderTo: 'container', // 报表显示在页面位置 container 为 div 定义的属性 spa
defaultSeriesType: 'spline', // 定义报表类型例如：line ，spline ，colume orm
events: { 对象
load: getForm //调用js 方法事件
} ip
},
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：
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.seriesname 该条曲线名称data[] 该条曲线的数据项addPoint([x,y],redraw,cover) 添加描点，redraw 是否重画，cover是否左移setData: function(data, redraw) 从新设置Data数组，redraw是否重画remove: function(redraw) 删除曲线redraw: function() 重画曲线marker ：enabled 是否显示描点