Highcharts基础教程(二):图表配置



 




 



一、图表容器



Highcharts 实例化中绑定容器的方式有两种 :



1.通过 dom 调用 highcharts 函数的方式



$("#container").highcharts({
// Highcharts 配置
});


2.通过 chart.renderTo 来指定



var charts = new Highcharts.Chart({
// Highcharts 配置
chart : {
renderTo : "container" // 注意这里一定是 ID 选择器
}
});


 



二、图表样式



1、宽度、高度



Highcharts 图表的高度和宽度是根据 DIV 容器的宽高来设定的,即



如果容器没有设定宽高,默认是 宽 400px, 高 400px,另外设置容器的 min-width 属性可以让 highcharts 自适应宽度,实例:



特别说明:饼图中可以通过设置宽高来让图形填充满整个容器



 



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 : 绘图投影



 



三、事件




  1. click :图表点击事件


  2. load :图表加载完后事件


  3. addSeries :图表增加序列事件


  4. drilldown :图表下钻事件


  5. drillup : 图表上钻事件


  6. redraw :图表重绘事件


  7. selection : 图表范围选择事件


  8. afterPrint : 图表打印前事件


  9. beforePrint : 图表打印后事件



 



四、其他配置



1、图表类型



通过 chart.type 来指定图表类型,表示如果默认图表类型,即如果 series 中没有指定 type, 那么图表的类型就由 该属性来确定。highcharts 支持的所有图表类型见 plotOptions。



 



2、图表缩放



图表缩放包括缩放(zoom)和平移(pan),对应的属性有:




  • zoomType: 缩放类型,可以是水平缩放、竖直缩放、平面缩放,对应的时设置 zoomType 为 "x"、"y"、"xy"


  • 缩放恢复按钮:可以指定按钮的样式、位置等,按钮的文字可以通过lang中的属性来指定


  • panning: 是否启用平移,启用平移后,按住平移键既可以使用鼠标对图表进行平移操作


  • panKey:平移键,默认是 Shift,即在启用平移后,按住指定的按键即可对图表进行平移操作



 



3、3D 属性



Highcharts 4.0 开始支持 3D 图表类型,目前支持 3D 柱形图、3D 饼图、3D 散点图。



 



4、其他




  • 图表反转 : 图表反转指的是将图表的 x轴和 y轴进行对调操作,对应的只需要设置 chart.inverted = true 即可。


  • 图表动画 :chart.animation 可以设置图表的全局动画效果,这里的动画指的是图表更新时的动画效果,而图表初始化的动画是在 plotOptions.series.animation 中启用和关闭的。


  • 图表自适应 :前面说过通过设置图表容器的 min-width 可以让图表自适应,这个开关对应的属性是 chart.reflow,另外,还可以通过 API 接口Chart.reflow在外部对图表进行自适应操作




 


点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

历史上的今天:03月29日

热门专题

安徽开放大学|安徽开放大学报名,安徽开放大学报考,安徽开放大学,什么是安徽开放大学,安徽开放大学学历,安徽开放大学学费,安徽开放大学报名条件,安徽开放大学报名时间,安徽开放大学学历,安徽开放大学专业
安徽开放大学
一年制中专|中专学历,中专是什么学历,中专是什么,中专有什么专业,中专升大专,一年制中专
一年制中专
安徽中源管业|安徽中源管业,安徽中源管业mpp电力管,安徽中源管业cpvc电力管,安徽中源管业pe穿线管,安徽中源管业电力管,安徽中源管业排水管,安徽中源管业通信管,安徽中源管业管材
安徽中源管业
金诺幼儿园(春城路金诺幼儿园)|昆明官渡区幼儿园,幼儿园报名,官渡区幼儿园,春城路幼儿园,幼儿园招生,学前班,昆明幼儿园,金诺幼儿园,环城南路幼儿园,石井路幼儿园
金诺幼儿园(春城路金诺幼儿园)
小程序开发|微信小程序,小程序开发,小程序,小程序制作,微信小程序开发,小程序公司,小程序开发公司,分销,三级分销系统,分销系统
小程序开发
综合高中|云南综合高中,昆明综合高中,综合高中能考本一吗,综合高中和普通高中的区别,综合高中是什么意思,综合高中能参加全国统一高考吗,综合高中可以考哪些大学,综合高中的学籍是什么
综合高中
开放大学|开放大学报名,开放大学报考,开放大学,什么是开放大学,开放大学学历,开放大学学费,开放大学报名条件,开放大学报名时间,开放大学学历,开放大学专业
开放大学
昆明网站建设|昆明网站建设,昆明网站开发,昆明网站建设公司,昆明网站建设价格,昆明网站设计,昆明网站制作,网页设计,高端网站建设,高端网站设计
昆明网站建设

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部