例子下载地址
http://www.baidupcs.com/file/578d9ad8524e2abb21134cd24cb7c407?fid=2467423588-250528-1196545267&time=
1362980841&sign=FDTA-DCb740ccc5511e5e8fedcff06b081203-zLox4hFniVTciMJFzd8co7dF3jk%3D&expires=1h
下面的demo都是例子里面没有提到的参数，总结了一下实际要用到的参数，然后全部放上来
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>曲线图</title>
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="Highcharts-2.3.0/js/highcharts.js"></script>
<script type="text/javascript" src="Highcharts-2.3.0/js/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function () {
var tmpcount = ['2012/1', '2012/2', '2012/3', '2012/4', '2012/5', '2012/6',
'2012/7', '2012/8', '2012/9', '2012/10', '2012/11', '2012/12'];
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',//要渲染到那个标签
type: 'line',//类型 目前 我用到了 line column pie (column line area综合)
marginRight: 130,
marginBottom: 25
},
lang:{ //这个是修改是上面 打印 下载的提升为汉字，如果在highcharts.js里面修改 简直累死
exportButtonTitle: '导出',
printButtonTitle: '打印',
downloadJPEG:"下载JPEG 图片",
downloadPDF: "下载PDF文档",
downloadPNG: "下载PNG 图片",
downloadSVG: "下载SVG 矢量图",
},
credits: {//右下角的文本
enabled: true,
position: {//位置设置
align: 'right',
x: -10,
y: -10
},
href: "http://www.baidu.com", //点击文本时的链接
style: {
color: 'blue'
},
text: "xxxx 信息科技有限公司"//显示的内容
},
exporting:{// 是否允许导出 就是右上角的按钮显示不显示
enabled:true,
},
title: {
text: '北京(一级标题)',
x: -20 //center
},
subtitle: {
text: '2012年温度各区对比(二级标题)',
x: -20
},
xAxis: {
categories: ['2012/1', '2012/2', '2012/3', '2012/4', '2012/5', '2012/6',
'2012/7', '2012/8', '2012/9', '2012/10', '2012/11', '2012/12']
},
plotOptions: { //要想添加事件 只能这样写了 好多地方都找不到的
line: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert(this.series.name + ' ' + tmpcount[this.x] + ' ' + this.y + '摄氏度');
}
//click: function (e) {
// alert(e.point.name + ' ' + e.point.percentage);
//}如果是饼状图 需要这样写 不然拿不到参数 搞了半天
}
}
}
},
yAxis: {
title: {
text: '温度(℃)'
},
plotLines: [{
value: 0,
1,
color: '#808080'
}]
},
tooltip: { //这个是鼠标放在上面提升的文字
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y + '摄氏度';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{ //这个是绑定数据了。
name: '丰台',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 45.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: '海淀',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: '朝阳',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: '宣威',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
});
</script>
</head>
<body>
<div id="container" style=" 1024px; height: 400px; margin: 0 auto">
</div>
</body>
</html>
常用的属性我就看到这了。下面是查看了api文档后，看到的一堆属性，大家保存着，不知道用什么了，查查。
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：刻度标签旋转度数