highcharts框架使用总结
2017-03-02 17:59
169 查看
Highcharts官网地址:https://www.hcharts.cn/products/highcharts
首先需要引入jQuery框架,然后包含Highcharts框架需要使用到的js文件,最新版本5.0.7的js是在code目录下,其中highcharts.js文件是必需的,其他文件根据需要使用的图表需要引入,如果需要使用图表的打印功能的话,需要引入modules/exporting.js文件。
基本使用方法:
在html页面为某个容器元素(如:div)定义一个id,然后在渲染页面的js中调用highcharts框架的方法:
Highcharts.chart(id, option);
其中id是页面某个元素的id,即我们希望图表在页面上展示的位置,option则是图表的一个配置对象变量,下面主要针对图表的这个配置变量进行讲解。
问题与方案:
如果数据提示框中需要显示额外的信息,而且这个信息对于不同数据点是不同的,该怎么设置??
可以在设置图表数据的data中的每个数据点对象添加额外属性,然后使用pointFormatter在回调函数中即可访问到这个额外的属性。
拿我做过的一个实例来说:
热力图表heatmap的data中每个数据点对象原本的格式为:{x:x轴位置, y:y轴位置, value:对应点的值},我可以在里面加多一个
属性来为每个数据点存放额外的信息,如:tip: 数据点提示语,那么在pointFormatter回调函数中即可使用this.point.tip来访问这个属性了。
特别注意:
1.要确保x轴值和对应y轴值的正确对应,永远不要相信js的数组下标,js使用push方法添加数组元素之后数组中的元素并不是按push的先后顺序来排序的。
2.x轴的min和max表示的是有滚动条的时候一屏显示多少数据,y轴的min和max表示的才是最大最小值。
3.设置全局的scrollbar配置之后,只会在x轴开启滚动条,若想在y轴启用滚动条,需要在yAxis参数下添加配置:
scrollbar: {
enabled: true,
showFull: false
}
4. 大坑:一定要注意series中的data数组里面的元素都必须是数字类型,若是字符串则会一直得不到图表显示。。而且数组的下标一定要从0开始,否则也会无法显示图表。。。
首先需要引入jQuery框架,然后包含Highcharts框架需要使用到的js文件,最新版本5.0.7的js是在code目录下,其中highcharts.js文件是必需的,其他文件根据需要使用的图表需要引入,如果需要使用图表的打印功能的话,需要引入modules/exporting.js文件。
基本使用方法:
在html页面为某个容器元素(如:div)定义一个id,然后在渲染页面的js中调用highcharts框架的方法:
Highcharts.chart(id, option);
其中id是页面某个元素的id,即我们希望图表在页面上展示的位置,option则是图表的一个配置对象变量,下面主要针对图表的这个配置变量进行讲解。
Highcharts.chart(id, { chart: {//图表配置 type: 'line', //图表默认类型,默认:line(pie:饼图,column,柱状图;line,折线图,funnel:漏斗图...)。 height: null, //图表高度,默认:null,根据容器元素高度计算。 width: null, //图表宽度,默认:null,根据容器元素宽度计算。 backgroundColor: '#FFFFFF', //图表区背景颜色,默认:#FFFFFF。 borderColor: '#335cad', //图表边框颜色,默认:#335cad。 borderWidth: 0, //图表边框宽度,默认:0,需要设置图表边框颜色的话需要将其设置大于0。 borderRadius: 0, //图表边框的圆角半径,默认:0。 margin: [0,0,0,0], //图表外边缘和绘图区域之间的边距,默认:[0,0,0,0](顺序:上右下左)。 polar: false //默认:false。当设置为true时,直线图、曲线图、面积图、柱状图等笛卡尔图会转成极地图, //例如,蜘蛛图就需要将其设置为true。极地图需要额外的引入highcharts-more.js才能使用。 }, title: {//标题配置 text: 'Chart title', //图表标题文字,默认:Chart title。若不想显示标题可设置为null。 align: 'center', //图表标题水平对齐方式,默认:center,可选:left、center、right。 floating: false, //默认:false,如果设置为true,标题将不占用图表区的位置。 style: { //标题样式配置 color: '#000000', fontWeight: 'bold', fontSize: '20px' } }, exporting: {//导出配置 enabled:true //是否启用导出模块,默认:true。若想去除图表右上角导出按钮则设置为false。 }, credits: {//版权配置 enabled:true //是否显示版权信息,默认:true。若想去除图表右下角highcharts官网链接则设置为false。 text:'Highcharts.com', //版权信息显示内容,默认:Highcharts.com。 href: '' //版权信息链接地址,默认:http://www.highcharts.com。 }, tooltip: {//数据提示框配置 enabled: true, //是否启用数据提示框,默认:true。 shared: true, //数据提示框共享(一个x轴值对应有多个y轴值时,多个y轴值共享提示框) backgroundColor: '', //数据提示框背景色,默认:rgba(247,247,247,0.85)。 borderColor: null, //数据提示框边框颜色,默认:null,使用该数据列或该点的颜色。 borderWidth: 1, //数据提示框边框宽度,默认:1。 borderRadius: 3, //数据提示框圆角半径,默认:3。 pointFormat: '', //数据提示框中该点的html代码。变量使用花括号括起来。 pointFormatter: function(){}, //回调函数,返回格式化提示框中该点的html代码。 }, xAxis: {//x轴配置 max: null, //坐标轴最大值,当设置为null时,将会自动计算。 //当endOnTick参数值为true时,max值将会向上取整。 min: null, //坐标轴最小值,当设置为null时,将会自动计算。注意:对数轴最小值不能为0,否则会出错。 //如果设置了startOnTick为true时,最小值可能会进行向下取整。 opposite: false, //是否将坐标轴显示在对立面,默认:false。 //默认情况下x轴在图表下方,y轴在左边,设置为true后,x轴将在上方显示,y轴在右边显示。 type: linear, //坐标轴类型,默认:linear。 //可选:linear(线性轴)、logarithmic(对数轴)、datetime(时间轴)、category(分类轴) categories: null, //分类坐标轴中的分类,定义x轴刻度显示内容,默认:null。 tickInterval: //间隔多少显示刻度 tickmarkPlacement: 'on', //本参数只对分类轴有效。当值为on时刻度线将在分类上方显示,当值为between时刻度线将 //在两个分类中间显示。当tickInterval为1时,默认是between,其他情况默认是on。 labels: {//坐标轴标签配置 enabled: true, //是否显示坐标刻度值,若不想显示则设置为false。 rotation: -45, //x轴刻度标题旋转一定角度 formatter: function(){}, //回调函数,返回在刻度位置显示的格式化内容。 }, //十字准星线配置 crosshair: true, //若是柱状图直接配置true crosshair : { //其他图表类型需要配置样式 width: 1, color: 'gray', dashStyle: 'Solid' }, visible: true //是否显示坐标轴,默认:true。包含坐标轴、坐标轴标题、坐标轴轴线、坐标轴标签等。 }, yAxis: {//y轴配置 //配置参数和x轴相同... }, scrollbar : {//滚动条配置 enabled:true //启用滚动条 }, series: {//数据列配置 cursor: 'pointer', //鼠标在数据列上的形状,默认是箭头,可设置为pointer(手型)。 name: '', //数据列名称,用于在legend(图例)、tooltip(数据提示框)中显示。 data: [{ //数据列数据配置,不同类型的图表数据列配置有所差异,这里示例的是柱状图数据列配置。 x: 1, y: 5, name: '', color: '' }] }, legend: {//图例配置 enabled: true, //图例开关,默认:true。 align: 'center', //图例在图表区中的水平对齐方式,默认:center。可选:left、center、right。 backgroundColor: '' //背景颜色 }, plotOptions: { series: { marker: { enabled: true //是否显示折线图上的点(折线图配置) }, dataLabels: { enabled: true, //是否在图表上各个数据点显示对应数据 color: '#a3a3a3', formatter: function() { //格式化 return this.y; } } }, column: { colorByPoint: true //给柱状图每个点分配颜色(柱状图配置) } } });
问题与方案:
如果数据提示框中需要显示额外的信息,而且这个信息对于不同数据点是不同的,该怎么设置??
可以在设置图表数据的data中的每个数据点对象添加额外属性,然后使用pointFormatter在回调函数中即可访问到这个额外的属性。
拿我做过的一个实例来说:
热力图表heatmap的data中每个数据点对象原本的格式为:{x:x轴位置, y:y轴位置, value:对应点的值},我可以在里面加多一个
属性来为每个数据点存放额外的信息,如:tip: 数据点提示语,那么在pointFormatter回调函数中即可使用this.point.tip来访问这个属性了。
特别注意:
1.要确保x轴值和对应y轴值的正确对应,永远不要相信js的数组下标,js使用push方法添加数组元素之后数组中的元素并不是按push的先后顺序来排序的。
2.x轴的min和max表示的是有滚动条的时候一屏显示多少数据,y轴的min和max表示的才是最大最小值。
3.设置全局的scrollbar配置之后,只会在x轴开启滚动条,若想在y轴启用滚动条,需要在yAxis参数下添加配置:
scrollbar: {
enabled: true,
showFull: false
}
4. 大坑:一定要注意series中的data数组里面的元素都必须是数字类型,若是字符串则会一直得不到图表显示。。而且数组的下标一定要从0开始,否则也会无法显示图表。。。
相关文章推荐
- 基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts
- 基于MVC+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts
- 基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts
- 基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts
- 基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts
- (转)基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts
- iOS编程技巧总结之语音篇(三)- OpenEars框架及其使用2
- Cairngorm框架使用总结
- 【SSI开发总结.10】eclispe中使用XFire框架调用WebService
- 【SSI开发总结.10】eclispe中使用XFire框架调用WebService
- 使用StructureMap扩展ASP.NET MVC三层结构框架系列文章总结篇(附源码下载)
- JavaScript框架--DOJO使用总结
- Shiro 权限框架使用总结
- 多层嵌入式框架(iframe)使用总结
- 服务器框架MINA使用经验总结
- Shiro 权限框架使用总结
- Cairngorm框架使用总结
- 【SSI开发总结.4】Spring中使用Acegi安全框架
- 多层嵌入式框架(iframe)使用总结
- Tiles框架使用总结(转)