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的渲染效果比较好,看起来漂亮。  有一点不好,就是灵活性大,官方的参考实例比较少,文档看英文有点费劲。

 

6、JS类库引用

     modules 里面是 扩展功能类库,已经引入highcharts.js,再开发maps、treemaps,只需引入map.js、treemap.js等。

     "highstock.js"包含"highcharts.js" 的主要功能,同时在一个页面里面使用highstock和highcharts,只需要引入"highstock.js"   和  "highcharts-more.js"。

你可能感兴趣的:(Highcharts)