HighCharts使用总结

标签：

1、常用属性

chart：
type:areaspline(线面图)、arearange（区间图）
zoomType: 缩放类型（沿着‘xy‘轴缩放）
alignTicks:设置坐标轴刻度对齐。 当有多个坐标轴时，设置坐标轴刻度的对其方式（通过自动计算还是不需要计算）。

color: ‘rgba(68, 170, 213, 0.1)‘ 颜色的透明色设置

style:CSS样式
设置文字颜色、字体、字号，但是字体的对齐则使用algin、x和y元素。比如： { "color": "#333333", "fontSize": "18px" }

Axis(x轴和y轴)：
type：轴类型 （datetime，日期时间）
gridLineWidth：网格线的粗细
alternateGridColor：网格之间的过度填充色
plotBands：区间带（比如1.5至3.5之间是什么颜色）
tickInterval: 标记间隔（7 * 24 * 3600 * 1000, // 一周）
minRange:最小区间 （14 * 24 * 3600000 // 14天）
opposite:是否对立面显示坐标轴，比如图表双轴的时候

plotOptions：用来设置所有数据序列的公共对象。
series.cursor：鼠标类型
series.point.events.：鼠标点事件
spline.pointInterval:3600000 点位间隔（毫秒，一小时）
area：设置图形区域的渐变颜色
pie.size:圆形图和环形图相对于图表区的大小，做小的“圆形图和环形图”的时候可以用到。
marker:数据的标记点

tooltip：提示窗
valueSuffix：单位后缀
shared: true （多数据序列是否共享提示窗）
headerFormat: 提示框中标题行的HTML代码，默认值(<span style="font-size: 10px">{point.key}</span><br/>)。变量被花括号包起来。可用的变量有point.key, series.name, series.color和其它从点对象point和series 对象中的成员。
pointFormat:提示框中该点的HTML代码，默认值 <span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>.
footerFormat: 字符串形式定义提示框中的注脚格式。
useHTML:是否用HTML取代svg展示ToolTip标签。

实例：tooltip: {
borderColor: ‘#0000AA‘,
//headerFormat: ‘<span style="font-size:10px">{point.key}</span><table>‘,
//pointFormat: ‘<tr><td style="padding:0">{series.name}: </td>‘ +
//‘<td style="padding:0"><b>{point.y:.1f} kWh</b></td></tr>‘,
//footerFormat: ‘</table>‘,
//useHTML: true,
valueDecimals:2,
shared: true,
valueSuffix: ‘kWh‘
},

series：数据序列
dashStyle: ‘shortdot‘ （虚线）
marker：数据标记点

legend:图例
layout：垂直图例还是水平图例
borderWidth：边框线
backgroundColor：背景颜色
align：水平位置
verticalAlign：垂直位置

2、HightChart

3、HighStock
上下多坐标轴： [{labels: {align: ‘right‘,
x: -3
},
title: {
text: ‘温度(℃)‘
},
height: ‘30%‘,
lineWidth: 2
}, {
labels: {
align: ‘right‘,
x: -3
},
title: {
text: ‘湿度（%）‘
},
top: ‘35%‘,
height: ‘30%‘,
offset: 0,
lineWidth: 2
}, {
labels: {
align: ‘right‘,
x: -3
},
title: {
text: ‘照度(Lux)‘
},
top: ‘70%‘,
height: ‘30%‘,
offset: 0,
lineWidth: 2
}]

4、Highmap
实例地址：http://jsfiddle.net/tfxudL9z/3/
做世界地图等，可以使用内置的地图或GeoJSON，而自定义地图分为以下几个步骤。
（1）制作svg文件，可以使用“SVGDeveloper”。
（2）http://www.highcharts.com/studies/map-from-svg.htm#http://www.highcharts.com/maps/maps/test.svg 通过这个网址，将 svg文件转化为 highmap支持的json文件。
（3）用Highmap载入json文件，显示地图。

5、Treemap
数据节点父子关系，可以设置向下钻取也可以不设置。
allowDrillToNode：是否向下钻取

 虽然还有其它很多图表插件，比如：echarts、fusioncharts、kcharts等。 但是，还是感觉Highcharts的渲染效果比较好，看起来漂亮。  有一点不好，就是灵活性大，官方的参考实例比较少，文档看英文有点费劲。

HighCharts使用总结

标签：

原文地址：http://www.cnblogs.com/ssol/p/4476993.html