highcharts报表开发 一：chart配置
highcharts 核心配置 chart
$("#container").highcharts({
chart : {
// 图表背景颜色配置
backgroundColor: '#FCFFC5',
// 图表背景渐变颜色
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 200, 255)']
]
},
// chart边框圆角
borderRadius : numer, // 值类型 1,5,10....
borderWidth : number, // 值类型 1,5,10....
colorCount : 10, // number 默认10 一般取默认值即可
type : 'line', //string 图表类型 默认取 line
height : number, // 图表高度 数字
ignoreHiddenSeries :bool, // false/true 隐藏数据列，缩放显示
inverted : false, // 反转坐标值 x轴跟y轴调换
margin : [null], // 默认null，表示图表区域和绘图区域的边距
// 设定鼠标平移按键
panning: true,
panKey : 'shift',
// 绘图区域样式调整
plotBackgroundColor : 'red', // #xxxxxx 绘图区域背景颜色
plotBackgroundColor: {// #xxxxxx 绘图区域背景渐变颜色
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 200, 255)']
]
}
plotBackgroundImage : 'xxx.jpg' // url地址 绘图区域背景图片
plotBorderColor : 'red' // 绘图区域边框颜色
plotBorderWidth : number //1,5，10 绘图区域边框宽度
reflow : true // 默认true 让图表自适应图表容器
zoomType : 'x' //x/y 图表选中缩放方式
// 图表缩放按钮的位置 reset zoom
resetZoomButton : {
position : {
align : 'right', // 默认 right
verticalAlign : 'top' // 默认top
},
relativeTo : 'plot' // 按钮的位置相对于绘图区还是整个图表,默认plot/chart
},
// 图表3d形状
options3d : {
enabled : true, // 开启3d效果
alpha : 30, // 默认0 内旋转
beta : 10, // 默认0 外旋转
depth : 100, // 默认100 深度
fitToPlot : true // 自适应图绘区 false不自适应
frame: {} // 背景颜色大小控制
}
// chart 事件触发
events : {
// 添加数据列触发
addSeries : function(e) {
},
// 打印chart前触发
beforePrint : function() {
},
// 打印chart之后触发
afterPrint : function() {
},
// 点击数据列触发， 异步加载数据 下钻
drilldown : function(e) {
},
// chart加载完毕触发
load : function () {
},
// （在 load 事件之后执行）后及每次图表重绘后后触发
render : function () {
},
// 鼠标选中图表事件 必须先设置zoomType的值(x, y)
selection : function(e) {
}
}
}
});
// 动态修改坐标值
$('#update').click(function () {
var chart = $('#container').highcharts();
chart.series[0].data[0].update(i % 2 ? 200 : 0);
});
highcharts报表 二：legend图例配置
说明：包含图表中数列标志和名称的容器。各数列（若饼图则为各点）由图例中的标志和名称表示。 图片:
legend : {
backgroundColor : '#ccc' // 背景颜色
borderWidth : '0', // 边框宽度
borderRadius : 0, // 边框圆角
borderColor : 'red', // 边框颜色
enabled : true, // 图例开关
layout : 'horizontal' // 图例布局类型，默认horizontal 水平布局，垂直布局vertical
// 图例点击后颜色
itemHiddenStyle : {
color : 'red'
}
// 鼠标放上样式
itemHoverStyle : {
color : 'red'
}
symbolPadding : 5 // 图标跟文字的间距
symbolPadding: // 图标后距
symbolRadius: // 图标圆角
symbolWidth: // 图标宽度
}highcharts报表 三：plotOptions 针对所有图表有效的通用配置
数据列配置是针对所有数据列及某种数据列有效的通用配置。
plotOptions : {
// 数据列通用配置
series : {
// 允许数据列点击标记， 默认false
allowPointSelect : false
// 初始化动画
animation : true
color : 'red' // 数据列的颜色
数据标签
dataLabels : {
align : '' // 数据列的水平对齐方式
enabled : false //如何设置为true，数据列自动显示列的信息，默认false
backgroundColor : 'red' // 数据标签背景颜色
borderColor : 'red' // 数据标签边框颜色
borderWidth : 1 //数据标签边框宽度
borderRadius : 5 // 数据标签边框圆角
color : 'red' // 数据标签字体颜色
format : '{y}unit' // 数据标签显示内容格式化
formatter : function () {
// 数据标签内容格式化函数
}
padding : 5 // 数据标签的内边距
x: 0, // 坐标显示位置
y: -20 // y轴显示
}
showCheckBox : false // true显示checkbox框，默认false
events : {
// 隐藏数据列触发
hide : function () {}
// 显示数据列触发
show : function () {}
// 动画加载完毕触发
afterAnimate : function () {}
// checkbox选中事件
checkboxClick ： function (){}
// 数据列点击事件
click : function () {}
// 禁止图列点击事件
legendItemClick : function () {return false}
// 鼠标划出数据列事件触发
mouseOut : function () {}
// 鼠标划入数据列事件触发
mouseOver : function () {}
},
keys : ['name', 'y', 'sliced', 'selected'] // 该参数指定了数据数组中每个元素对应的 key, 当另一个（data）当数组中第三个元素都为true时默认选中，突出显示['chrom', 192,true,true],
lineWidth : 1, // 数据列的线条宽度
linkedTo : ':previous' // 数据列关联，关联前一个数据列
// 数据点配置
marker : {
enabled : null// 默认null, 是否显示数据点标记
lineColor : '' // 数据点线条颜色
fillColor : '' // 数据点中心圆点颜色
height : number // 数据点高度
states : {
hover : {} // 鼠标经过数据点样式配置
}
radius : number // 指定数据点的大小
symbol : 'circle' // 默认圆点, 一般取默认值
}
negativeColor : '#ccc' // 指定数据列负值颜色，比如-1
// 数据点相关配置
point : {
events : {
// 点击数据点触发
click : function () {}
// 鼠标离开数据点触发事件
mouseOut : function () {
}
// 鼠标划入数据点触发事件
mouseOver : function () {
}
// 更新数据点触发
update : function () {
}
// 点击选中数据点时触发，必须allowPointSelect为true才有效
select : function () {
}
// 取消选中数据点触发
unselect : function () {
}
}
// 数据点间隔， 开始值
pointStart: Date.UTC(2010, 0, 1),
// 间隔一天
pointInterval: 24 * 3600 * 1000
// 间隔单位
pointIntervalUnit: 'month'
// 指定数据列初始的选中状态，如果设置了 showCheckbox 为 true 时，默认是：false.
selected: false
// 数据列阴影效果
shadow: true
// 是否显示CheckBox框， 默认false, 为true 时显示
showCheckbox : false
// 是否进行堆叠(堆叠顾名思义就是多跟数据列堆成一根), 默认不堆叠，是否开启堆叠,"normal"（普通堆叠） 和 "percent"（百分比堆叠
stacking : null
// 鼠标划过状态下的数据列配置
states : {
hover : {
//..............配置项
}
}
tooltip: {
xDateFormat: '%Y-%m-%d',
dateTimeLabelFormats.day
dateTimeLabelFormats: {
day: '%m-%d',
month: '%Y-%m'
},
shared: true
valueDecimals: 小数精确位数
valuePrefix: 值的前缀
valueSuffix: 值的后缀
},
// 数据列显示状态， 默认true, false为隐藏
visible : true
// 指定数据列的分区数组,可以理解为一条数据列可以配置多个颜色显示
zone : []
}
}
}
// 数值格式化百分比
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>'
}highcharts报表 四：tooltip数据提示框指配置
数据提示框指的当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值，数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定；通过设置 tooltip.enabled = false 即可不启用提示框。
tooltip : {
shared: true, // 提示框是否共享
backgroundColor : 'red', // 提示框背景色
enabled : true, // 是否启用提示框， 默认启用
formatter : function (){ // 提示框格式化字符串
var s = '<b>'+this.x+'</b>';
$.each(this.points ,function(){
s += '<br />' + this.series.name + ':' + this.y;
});
return s;
},
pointFormatter : function () { // 格式化提示框字符串，更灵活，优先使用
// 函数中的 this 代表着 Point 对象。
}
positioner: function () { // 固定提示框
return { x: 80, y: 50 };
},
valueSuffix: ' cm', // 数值后缀
valuePrefix : '数据前缀' // 数值前缀
valueDecimals : 2, // 保留小数位数
xDateFormat : '%Y-%m-%d', // shared: true,
backgroundColor : 'red',
enabled : true,
formatter : function (){
var s = '<b>'+this.x+'</b>';
$.each(this.points ,function(){
s += '<br />' + this.series.name + ':' + this.y;
});
return s;
},
pointFormatter : function () {
// 函数中的 this 代表着 Point 对象。
}
positioner: function () {
return { x: 80, y: 50 };
},
valueSuffix: ' cm',
valuePrefix : '数据前缀'
valueDecimals : 2,
xDateFormat : '%Y-%m-%d', // 如果 X轴是时间轴，格式化提示框标题中的日期
}highcharts报表 四：xAxis X 轴（或分类轴）通用配置
**X 轴（或分类轴）。默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调。
在多轴中，xAxis 可以配置成数组的形式。
X 轴可以通过 坐标轴对象 来进行动态更新或进行其他操作。**
xAxis {
// x坐标轴中的分类
categories :[1,2,3,.....] // Array<String>
// 配置跟随鼠标或鼠标滑过点时的十字准星线
crosshair: {
dashStyle : 'shortdot',
color : '#cccccc',
zIndex : 1,
},
// 时间轴标签的格式化字符串
type : 'datetime',
dateTimeLabelFormats: {
day: '%Y-%m-%d',
month : '%Y-%m'
},
// 坐标轴标签
labels: {
align : 'center' // 坐标轴标签位置
enabled: true // 是否显示坐标轴标签, 默认显示
// 坐标轴内容格式化函数
formatter: function () {
return '<a href="' + categoryLinks[this.value] + '">' +
this.value + '</a>';
}
// x轴旋转
rotation: 0
// 设置轴标签的样式
style : {
color : xxx.
fontSize : 18
}
// 是否显示坐标轴，默认显示，false不显示
visible : true
}