图表配置(Chart)
2015-09-12 22:55
260 查看
本节主要讲解图表配置,对应的 API 位置为
Highcharts 实例化中绑定容器的方式有两种
1、通过 dom 调用 highcharts() 函数的方式
2、通过 chart.renderTo 来指定
Highcharts 图表的高度和宽度是根据 DIV 容器的宽高来设定的,即
如果容器没有设定宽高,默认是 宽
highcharts 自适应宽度,实例:
特别说明:饼图中可以通过设置宽高来让图形填充满整个容器
图表样式属性包括 border、backgroundColor、margin、spacing、style等
边框:包括 borderColor、borderRadius、borderWidth
背景:包括 backgroundColor
外边距:包括 margin、marginTop、marginRight、marginBottom、marginLeft
内边距:包括 spacing、spacingTop、spacingRight、spacingBottom、spacingLeft
其他样式:其他属性例如字体等属性,实例代码
另外还可以通过
CSS 类并给定 CSS 样式。
图表绘图区的可配置属性有:
* plotBackgroundColor : 绘图区背景颜色
* plotBackgroundImage : 绘图区背景图片
* plotBorderColor : 绘图区边框颜色
* plotBorderWidth : 绘图区边框宽度
* plotShadow : 绘图投影
click :图表点击事件,效果见 在线演示
load :图表加载完后事件,效果见 在线演示
addSeries :图表增加序列事件,效果见在线演示
drilldown :图表下钻事件,效果见 在线演示
drillup : 图表上钻事件,效果见 在线演示
redraw :图表重绘事件,效果见 在线演示
selection : 图表范围选择事件,效果见在线演示
afterPrint : 图表打印前事件
beforePrint : 图表打印后事件
通过
该属性来确定。highcharts 支持的所有图表类型见
图表缩放包括缩放(zoom)和平移(pan),对应的属性有:
zoomType : 缩放类型,可以是水平缩放、竖直缩放、平面缩放,对应的时设置
缩放恢复按钮:可以指定按钮的样式、位置等,见 resetZoomButton,按钮的文字可以通过 lang 中的属性来指定
selectionMarkerFill :
panning : 是否启用平移,启用平移后,按住平移键既可以使用鼠标对图表进行平移操作
panKey:平移键,默认是 “Shift”,即在启用平移后,按住指定的按键即可对图表进行平移操作,在线实例
Highcharts 4.0 开始支持 3D 图表类型,目前支持 3D 柱形图、3D 饼图、3D 散点图。
3D 相关属性见:chart.options3d ,关于 3D 图形的详细教程将以单独文章形式给出。
图表反转 : 图表反转指的是将图表的 x轴和 y轴进行对调操作,对应的只需要设置
图表动画 :
图表自适应 :前面说过通过设置图表容器的
API 接口
chart,主要内容包括图表全局样式、绘图区、图表事件、等相关内容。
一、图表容器
Highcharts 实例化中绑定容器的方式有两种1、通过 dom 调用 highcharts() 函数的方式
$("#container").highcharts({ // Highcharts 配置 });
2、通过 chart.renderTo 来指定
var charts = new Highcharts.Chart({ // Highcharts 配置 chart : { renderTo : "container" // 注意这里一定是 ID 选择器 } });
二、图表样式
1、宽度、高度
Highcharts 图表的高度和宽度是根据 DIV 容器的宽高来设定的,即<div id="container" style="width:400px;height:400px"></div>
如果容器没有设定宽高,默认是 宽
400px, 高
400px,另外设置容器的
min-width属性可以让
highcharts 自适应宽度,实例:
<div id="container" style="min-width:400px;height:400px"></div>[/code]
特别说明:饼图中可以通过设置宽高来让图形填充满整个容器
2、图表样式
图表样式属性包括 border、backgroundColor、margin、spacing、style等边框:包括 borderColor、borderRadius、borderWidth
背景:包括 backgroundColor
外边距:包括 margin、marginTop、marginRight、marginBottom、marginLeft
内边距:包括 spacing、spacingTop、spacingRight、spacingBottom、spacingLeft
其他样式:其他属性例如字体等属性,实例代码
chart : { style : { fontFamily:"", fontSize:'12px', fontWeight:'bold', color:'#006cee' } }
另外还可以通过
chart.className来绑定
CSS 类并给定 CSS 样式。
3、图表绘图区
图表绘图区的可配置属性有:* plotBackgroundColor : 绘图区背景颜色
* plotBackgroundImage : 绘图区背景图片
* plotBorderColor : 绘图区边框颜色
* plotBorderWidth : 绘图区边框宽度
* plotShadow : 绘图投影
三、事件
click :图表点击事件,效果见 在线演示load :图表加载完后事件,效果见 在线演示
addSeries :图表增加序列事件,效果见在线演示
drilldown :图表下钻事件,效果见 在线演示
drillup : 图表上钻事件,效果见 在线演示
redraw :图表重绘事件,效果见 在线演示
selection : 图表范围选择事件,效果见在线演示
afterPrint : 图表打印前事件
beforePrint : 图表打印后事件
四、其他配置
1、图表类型
通过 chart.type来指定图表类型,表示如果默认图表类型,即如果 series 中没有指定 type, 那么图表的类型就由
该属性来确定。highcharts 支持的所有图表类型见
plotOptions。
2、图表缩放
图表缩放包括缩放(zoom)和平移(pan),对应的属性有:zoomType : 缩放类型,可以是水平缩放、竖直缩放、平面缩放,对应的时设置
zoomType为
"x"、
"y"、
"xy"
缩放恢复按钮:可以指定按钮的样式、位置等,见 resetZoomButton,按钮的文字可以通过 lang 中的属性来指定
selectionMarkerFill :
panning : 是否启用平移,启用平移后,按住平移键既可以使用鼠标对图表进行平移操作
panKey:平移键,默认是 “Shift”,即在启用平移后,按住指定的按键即可对图表进行平移操作,在线实例
3、3D 属性
Highcharts 4.0 开始支持 3D 图表类型,目前支持 3D 柱形图、3D 饼图、3D 散点图。3D 相关属性见:chart.options3d ,关于 3D 图形的详细教程将以单独文章形式给出。
4、其他
图表反转 : 图表反转指的是将图表的 x轴和 y轴进行对调操作,对应的只需要设置 chart.inverted = true即可。
图表动画 :
chart.animation可以设置图表的全局动画效果,这里的动画指的是图表更新时的动画效果,而图表初始化的动画是在
plotOptions.series.animation中启用和关闭的。
图表自适应 :前面说过通过设置图表容器的
min-width可以让图表自适应,这个开关对应的属性是
chart.reflow,另外,还可以通过
API 接口
Chart.reflow在外部对图表进行自适应操作,实例见这里
相关文章推荐
- ajax(2)
- (Git初步入门)一篇三分钟就可以看完的Git教程
- 35选7彩票自选系统(附加实现效果Java源代码)
- IT设备管理系统
- 第一行代码学习笔记-第二章 探究活动-4.活动的启动模式
- 第一行代码学习笔记-第二章 探究活动-5. 活动的最佳实现
- Bootstrap弹出框
- 关于Expression表达式树的拼接
- 经典语录合集【2】
- 配置JAVA的环境变量
- 浅谈Android的三种持久化技术之SharedPreferences存储
- ubuntu如何卸载apt-get install安装的软件
- sql server 2008安装教程
- MariaDB 10.0.X中,动态列支持 JSON 格式来获取数据。
- lintcode-数字组合II-153
- java中十进制转为二进制源码
- 第一行代码学习笔记-第二章 探究活动-3.活动的生命周期
- 终于
- c++ 格式化字符串
- 静态变量和成员变量的区别