【1】 highcharts绘图中最全的参数配置
chart.events.addSeries：添加数列到图表中。
chart.events.click：整个图表的绘图区上所发生的点击事件。
chart.events.load：图表加载事件。
chart.events.redraw：图表重画事件，当点击图注显示和隐藏绘图时可以触发。
chart.events.selection：当图表曲线可选择放大时，当选择图表操作时，可以触发该事件。
chart.height：所绘制图表的高度值。
chart.inverted：图表中的x，y轴对换。
chart.polar：是否为极性图表。
chart.reflow：当窗口大小改变时，图表宽度自适应窗口大小改变。
chart.renderTo：图表加载的位置，是页面上的一个DOM对象。
chart.showAxes：在空白图表中，是否显示座标轴。
chart.type：图表的类型，默认为line，还有bar/column/pie……
chart.width：图表绘图区的宽度，默认为自适应。
chart.zoomType：图表中数据报表的放大类型，可以以X轴放大，或是以Y轴放大，还可以以XY轴同时放大。
colors：图表中多数列时，各数列之间的颜色。是一个数组，一般不动。
credits.enabled：是否允许显示版权信息。
credits.href：版权所有的链接。
credits.text：版权信息显示文字。
exporting.buttons.exportButton.enabled：是否允许显示导出按钮。
exporting.buttons.exportButton.menuItems：导出按钮的菜单选项。
exporting.buttons.exportButton.onclick：导出按钮被点击的事件，不是内部的菜单。
exporting.buttons.printButton.enabled：是否允许打印按钮。
exporting.buttons.printButton.onclick：打印按钮的点击事件。
exporting.enabled：打印和导出按钮是否被允许。
exporting.filename：被导出文件的文件名。
exporting.type：默认导出图片的文件格式。
exporting.url：SVG图表转换并导出的接口处理地址。
exporing.width：默认导出图片的宽度。
labels：标签，可以加载到图表的任何位置，里面有items，style。
lang：语言参数配置，与导出按钮菜单有关的配置，时间名称的配置等。
legend.enabled：是否允许图注。
navigation.buttonOptions.enabled：图表中所有导航中的按钮是否可被点击。
plotOptions.area.allowPointSelect：是否允许数据点的点击。
plotOptions.area.color：绘图的颜色。
plotOptions.area.dataLabels.enabled：是否允许数据标签。
plotOptions.area.enableMouseTracking：是否允许数据图表中，数据点的鼠标跟踪气泡显示。
plotOptions.area.events.checkboxClick：数据图表中图注中复选框的点击事件。
plotOptions.area.events.click：数据图表中，数据点的点击事件。
plotOptions.area.events.hide：数据图表中，某一数据序列隐藏时的事件。
plotOptions.area.events.show：数据图表中，某一数据序列显示时的事件。
plotOptions.area.events.legendItemClick：数据图表中，图注中的项目被点击时的事件，直接赋值false，则不可点击。
plotOptions.area.events.mouseOut：数据点的鼠标移出事件。
plotOptions.area.events.mouseOver：数据点的鼠标经过事件。
plotOptions.area.marker.enabled：图表中绘图中是否显示点的标记符。
plotOptions.area.marker.states.hover.enabled：是否允许标记符的鼠标经过状态。
plotOptions.area.marker.states.select.enabled：是否允许标记符的选择状态。
plotOptions.area.point.events.click：图表中每一个单独的点点击事件。
plotOptions.area.point.events.mouseOut
plotOptions.area.point.events..mouseOver
plotOptions.area.point.events.remove：删除图表中的点时的事件。
plotOptions.area.point.events.select：图表中点选择事件。
plotOptions.area.point.events.unselect：图表中点取消选择时的事件。
plotOptions.area.point.events.update：图表中数据发生更新时的事件。
plotOptions.area.visible：加载时，数据序列默认是显示还是隐藏。
plotOptions.area.zIndex：在多序列的情况下，调整每一个序列的层叠顺序。
以上的point.events同样还适用于其他面积类图表（arearange、areaspline、areasplinerange），其他的柱状图（bar、column）及所有图表。
plotOptions.area.showInLegend：是否在图注中显示。
plotOptions.area.stacking：是以值堆叠，还是以百分比堆叠。
plotOptions.area.states.hover.enabled：鼠标放上的状态是否允许。
plotOptions.area.stickyTracking：鼠标粘性跟踪数据点。
plotOptions.arearange，plotOptions.areaspline，plotOptions.areasplinerange类同于plotOptions.area
plotOptions.bar.groupPadding：对于柱状图分组，每个分组之间的间隔。
plotOptions.bar.grouping：是否对数据进行分组。
plotOptions.bar.minPointLength:：定义当point值为零时，点的最小长度为多少
plotOptions.bar.showInLegend：是否在图注中显示。
plotOptions.bar.stacking：是以值堆叠，还是以百分比堆叠（normal/percent）。
plotOptions.column，plotOptions.columnrange类同于plotOptions.bar
plotOptions.line的相关配置类似于plotOptions.area配置。
plotOptions.pie.ignoreHiddenPoint：在饼状图中，某一个序列经图注点击隐藏后，整个饼状图是重新以100%分配，还是只在原图基础上隐藏，呈现一个缺口。
plotOptions.pie.innerSize：绘制饼状图时，饼状图的圆心预留多大的空白。
plotOptions.pie.slicedOffset：与allowPointSelect结合使用，当点被点击时，对应的扇区剥离，这个参数即配置离开的距离。
plotOptions.pie的其他常用配置参数类同于plotOptions.area,plotOptions.scatter，plotOptions.series，plotOptions.spline的相关配置类似于plotOptions.area配置。
series：是一个数组。
series.data.color：某一个数据的颜色。
chart.events.addSeries：添加数列到图表中。
chart.events.click：整个图表的绘图区上所发生的点击事件。
chart.events.load：图表加载事件。
chart.events.redraw：图表重画事件，当点击图注显示和隐藏绘图时可以触发。
chart.events.selection：当图表曲线可选择放大时，当选择图表操作时，可以触发该事件。
chart.height：所绘制图表的高度值。
chart.inverted：图表中的x，y轴对换。
chart.polar：是否为极性图表。
chart.reflow：当窗口大小改变时，图表宽度自适应窗口大小改变。
chart.renderTo：图表加载的位置，是页面上的一个DOM对象。
chart.showAxes：在空白图表中，是否显示座标轴。
chart.type：图表的类型，默认为line，还有bar/column/pie……
chart.width：图表绘图区的宽度，默认为自适应。
chart.zoomType：图表中数据报表的放大类型，可以以X轴放大，或是以Y轴放大，还可以以XY轴同时放大。
colors：图表中多数列时，各数列之间的颜色。是一个数组，一般不动。
credits.enabled：是否允许显示版权信息。
credits.href：版权所有的链接。
credits.text：版权信息显示文字。
exporting.buttons.exportButton.enabled：是否允许显示导出按钮。
exporting.buttons.exportButton.menuItems：导出按钮的菜单选项。
exporting.buttons.exportButton.onclick：导出按钮被点击的事件，不是内部的菜单。
exporting.buttons.printButton.enabled：是否允许打印按钮。
exporting.buttons.printButton.onclick：打印按钮的点击事件。
exporting.enabled：打印和导出按钮是否被允许。
exporting.filename：被导出文件的文件名。
exporting.type：默认导出图片的文件格式。
exporting.url：SVG图表转换并导出的接口处理地址。
exporing.width：默认导出图片的宽度。
labels：标签，可以加载到图表的任何位置，里面有items，style。
lang：语言参数配置，与导出按钮菜单有关的配置，时间名称的配置等。
legend.enabled：是否允许图注。
navigation.buttonOptions.enabled：图表中所有导航中的按钮是否可被点击。
plotOptions.area.allowPointSelect：是否允许数据点的点击。
plotOptions.area.color：绘图的颜色。
plotOptions.area.dataLabels.enabled：是否允许数据标签。
plotOptions.area.enableMouseTracking：是否允许数据图表中，数据点的鼠标跟踪气泡显示。
plotOptions.area.events.checkboxClick：数据图表中图注中复选框的点击事件。
plotOptions.area.events.click：数据图表中，数据点的点击事件。
plotOptions.area.events.hide：数据图表中，某一数据序列隐藏时的事件。
plotOptions.area.events.show：数据图表中，某一数据序列显示时的事件。
plotOptions.area.events.legendItemClick：数据图表中，图注中的项目被点击时的事件，直接赋值false，则不可点击。
plotOptions.area.events.mouseOut：数据点的鼠标移出事件。
plotOptions.area.events.mouseOver：数据点的鼠标经过事件。
plotOptions.area.marker.enabled：图表中绘图中是否显示点的标记符。
plotOptions.area.marker.states.hover.enabled：是否允许标记符的鼠标经过状态。
plotOptions.area.marker.states.select.enabled：是否允许标记符的选择状态。
plotOptions.area.point.events.click：图表中每一个单独的点点击事件。
plotOptions.area.point.events.mouseOut
plotOptions.area.point.events..mouseOver
plotOptions.area.point.events.remove：删除图表中的点时的事件。
plotOptions.area.point.events.select：图表中点选择事件。
plotOptions.area.point.events.unselect：图表中点取消选择时的事件。
plotOptions.area.point.events.update：图表中数据发生更新时的事件。
plotOptions.area.visible：加载时，数据序列默认是显示还是隐藏。
plotOptions.area.zIndex：在多序列的情况下，调整每一个序列的层叠顺序。
以上的point.events同样还适用于其他面积类图表（arearange、areaspline、areasplinerange），其他的柱状图（bar、column）及所有图表。
plotOptions.area.showInLegend：是否在图注中显示。
plotOptions.area.stacking：是以值堆叠，还是以百分比堆叠。
plotOptions.area.states.hover.enabled：鼠标放上的状态是否允许。
plotOptions.area.stickyTracking：鼠标粘性跟踪数据点。
plotOptions.arearange，plotOptions.areaspline，plotOptions.areasplinerange类同于plotOptions.area
plotOptions.bar.groupPadding：对于柱状图分组，每个分组之间的间隔。
plotOptions.bar.grouping：是否对数据进行分组。
plotOptions.bar.minPointLength:：定义当point值为零时，点的最小长度为多少
plotOptions.bar.showInLegend：是否在图注中显示。
plotOptions.bar.stacking：是以值堆叠，还是以百分比堆叠（normal/percent）。
plotOptions.column，plotOptions.columnrange类同于plotOptions.bar
plotOptions.line的相关配置类似于plotOptions.area配置。
plotOptions.pie.ignoreHiddenPoint：在饼状图中，某一个序列经图注点击隐藏后，整个饼状图是重新以100%分配，还是只在原图基础上隐藏，呈现一个缺口。
plotOptions.pie.innerSize：绘制饼状图时，饼状图的圆心预留多大的空白。
plotOptions.pie.slicedOffset：与allowPointSelect结合使用，当点被点击时，对应的扇区剥离，这个参数即配置离开的距离。
plotOptions.pie的其他常用配置参数类同于plotOptions.area,plotOptions.scatter，plotOptions.series，plotOptions.spline的相关配置类似于plotOptions.area配置。
series：是一个数组。
series.data.color：某一个数据的颜色。
series.data.dataLabels：序列中某一个数据的数据标签。
series.data.events类同于plotOptions.area.point.events的相关配置。
series.data.marker类同于plotOptions.area.marker的相关配置。
series.data.name：配置数据点的名称。
series.data.sliced：配置在饼图中，扇区的分离距离大小。
series.data.x：点的x值。
series.data.y：点的y值。
series.name：数据序列的名称。
series.stack：堆叠的分组索引。
series.type：数据序列的展示类型。
series.xAxis，series.yAxis：当使用多座标轴时，指定某个数列对应哪个座标轴。
subtitle：配置图表的子标题。
title：配置图表的标题。
tooltip：配置图表中数据的气泡提示。
tooltip.valueDecimals：允许的小数点位数。
tooltip.percentageDecimals：允许百分比的小数点后位数。
xAxis，yAxis配置设置座标轴
allowDecimals：座标轴上是否允许小数。
categories：是一个数组，座标轴的分类。
plotLines：绘制主线。
tickColor：刻度颜色。
tickInterval：刻度的步进值。
labels.rotation：刻度标签旋转度数
【2】如何改变报表中打印图标和导出图标的中英文显示
n(v.lang,{downloadPNG:"下载PNG图片",downloadJPEG:"下载JPEG图片",downloadPDF:"下载PDF文档",downloadSVG:"下载矢量图像",exportButtonTitle:"导出报表图像",printButtonTitle:"打印报表"});
【3】组装添加显示highchart图表所用的数据
显示highchart图标的js代码
$(function () {
//填充数据使用,使用jquery来获取隐藏域的值
var xAxisTimeInfo = $("#xAxisTime").val();
var totalRecordInfo = $("#totalRecord").val();
var totalRecordHYInfo = $("#totalRecordHY").val();
var totalRecordLJInfo = $("#totalRecordLJ").val();
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: '每月订单数量统计'
},
subtitle: {//副标题
text: ''
},
exporting:{
filename:"订单统计", //下载显示的文件名称
sourceWidth: 1000, //下载图片的宽度
sourceHeight: 550, //下载图片的高度
//指定下载图片的url，这里使用的本地的java代码，没有使用官网的代码(那//样会受到highchart官网的网络限制,这里的java代码是结合的struts1来//实现的，在java代码解决了导出图片中中文乱码的问题以及下载文件名乱码//的问题,详见java代码中说明) url:'<%=basePath%>shop/newOrder/orderPre/exportImage.do'//这里是一个重点哦,也可以修改exporting.js中对应的url
},
/**
* 去掉图标的右下角HightCharts.com 的图标
*/
credits: {
enabled : false, //设置false就不会显示右下角的官网链接
//右下角连接的显示位置
position:{ align: 'right',x: -8, verticalAlign: 'bottom',y: -390 },
//右下角链接的地址href:'<%=basePath%>shop/newOrder/orderPre/orderSearch4HighCharts.do?type=1',
text:'区域图表',//右下角连接的名字
style : {cursor:'pointer',color:'#909090',fontSize:'20px'}
},
xAxis: {
categories: eval(xAxisTimeInfo)
},
yAxis: {
min: 0,
title: {
text: '单位 (个)'
}
},
//鼠标旁边的提示框的样式
//1. point.y:.0f 提示框中显示的y轴单位的小数点位数
//2. style="width:160px;height:50px" 提示框的宽高
//3. point.key 座标的x轴的值
tooltip: {
headerFormat: '<span style="font-size:20px;">{point.key}</span><table style="width:160px;height:50px">',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.0f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
//图例的显示名称和数据
//这里使用了eval函数处理一下，使用jquery获取到的隐藏域的值
//否则不会显示
series: [{
name: '裸机数量',
data: eval(totalRecordLJInfo)
}, {
name: '订单总量',
data: eval(totalRecordInfo)
}, {
name: '合约机数量',
data: eval(totalRecordHYInfo)
}]
});
});<h3>【4】重点说一下exporting参数的使用</h3><p style="color: rgb(54, 46, 43); font-family: Arial; line-height: 26px;"><span style="font-size:18px;"> </span><span style="font-size:14px;"><span style="color: rgb(255, 0, 0);">(1)exportButton:</span>导出按钮样式</span></p><p style="color: rgb(54, 46, 43); font-family: Arial; line-height: 26px;"><span style="font-size:14px;"> (11)hoverSymbolFill:鼠标移上去改变按钮箭头的颜色，String型，默认值为#768F3E.</span></p><p style="color: rgb(54, 46, 43); font-family: Arial; line-height: 26px;"><span style="font-size:14px;"> (12)onclick:点击报表导出按钮事件一般和menuItems同时使用。</span></p><p style="color: rgb(54, 46, 43); font-family: Arial; line-height: 26px;"><span style="font-size:14px;"> (13)menuItems:点击导出按钮的时候出现的下拉列表的设置选项，一般和onclick同时使用，Array类型。</span></p><p style="color: rgb(54, 46, 43); font-family: Arial; line-height: 26px;"><span style="font-size:14px;">例如</span></p><p style="color: rgb(54, 46, 43); font-family: Arial; line-height: 26px;"><span style="font-size:14px;"></span><pre name="code" class="html"> exporting : {
enabled : true,
buttons : {
exportButton : {
menuItems: [{
text: '导出PNG图片(宽度为250px)',
onclick:function() {
this.exportChart({
width:200 //导出报表的宽度
});
}
}, {
text: '导出PNG图片(宽度为800px)',
onclick:function() {
this.exportChart();// 800px by default
}
},
null,
null
]
},
printButton: {
enabled : false
}
}
}点击时出现自己设置的下拉标题以及导出图片的大小。
(14)symbol : 符号的按钮。点定义功能在Highcharts.Renderer.symbols集合。String类型，默认值为“exportIcon”。symbol的可选值有'circle', 'diamond','exportIcon', 'printIcon', 'square', 'triangle'和'triangle-down'对应的图片如下所示：
(15)symbolFill : symbol的背景色，String类型，默认值是#A8BF77
(16)x : 相对于本身横向的位置，正负数都可以，Number类型，默认值是10
(17)align: 在报表中的水平位置，String类型，可选值有"left"，"center"，"right"，默认是"right"
(18)backgroundColor: 报表导出图片按钮的背景色设置
例如：
backgroundColor:{
linearGradient:[0, 0, 0, 20],
stops:[
[0.1,'#ff0000'],
[0.9,'#00ff00']
]
}(19)borderColor: 报表导出按钮边框的颜色，String类型，默认值是#B0B0B0
(20)borderRadius: 报表导出按钮边框四个对角的圆滑程度，Number类型，默认值是3
(21)borderWidth: 报表导出按钮边框的宽度，Number类型，默认值是1
(22)enabled: 报表导出按钮是否启用，Boolean类型，默认值是true
(23)height: 报表导出按钮的高度，Number类型，默认值是20
(24)hoverBorderColor: 鼠标经过报表导出按钮时边框的颜色，String类型，默认值是#909090
(25)hoverSymbolStroke : 鼠标经过报表导出按钮的中间那个箭头的边框颜色，String类型，默认值是#4572A5
(26)symbolSize : 报表导出按钮的中间那个箭头的大小尺寸，Number类型，默认值是12
(27)symbolStroke : 报表导出按钮的中间那个箭头的边框颜色，String类型，默认值是#A0A0A0
(28)symbolStrokeWidth : 报表导出按钮的中间那个箭头的边框宽度，Number类型，默认值是1
(29)symbolX : 报表导出按钮的中间那个箭头的横向位置，Number类型，默认值是11.5
(30)symbolY : 报表导出按钮的中间那个箭头的纵向位置，Number类型，默认值是10.5
(31)verticalAlign : 报表导出按钮的垂直对齐方式，String类型，可选项是"top", "middle" 或者 "bottom". 默认值是"top"
(32)width : 报表导出按钮的宽度，Number类型，默认值是24
(33)y : 相对于本身纵向的位置，正负数都可以，Number类型，默认值是10
(2)printButton:打印按钮样式
2、enabled:是否显示按钮（也就是启用打印导出功能），布尔型，默认显示true
3、filename:导出报表图片的文件名，String型,默认值chart，不支持中文名字的命名
4、type：如果chart.exportChart()调用时没有指定类型选项，默认的MIME类型。
可能的值是image/png, image/jpeg, application/pdf andimage/svg+xml. 默认的值是"image/png".
5、url：转换图片的服务器url，默认是用免费网络服务器highcharts，默认值http://export.highcharts.com
6、width：导出PNG或JPG图片大小，数字型。默认值800
注意：width和height的比值为2:1，设置width的时候，最好设置成200的倍数，不然设置成100或300等宽度时候，下载的时间会比较长。
