博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
图表配置(Chart)
阅读量:7046 次
发布时间:2019-06-28

本文共 1992 字,大约阅读时间需要 6 分钟。

hot3.png

一、图表容器

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'  }}

另外还可以通过  来绑定 CSS 类并给定 CSS 样式。

3、图表绘图区

图表绘图区的可配置属性有:

  • plotBackgroundColor : 绘图区背景颜色
  • plotBackgroundImage : 绘图区背景图片
  • plotBorderColor : 绘图区边框颜色
  • plotBorderWidth : 绘图区边框宽度
  • plotShadow : 绘图投影

三、事件

  1. click :图表点击事件,效果见 
  2. load :图表加载完后事件,效果见 
  3. addSeries :图表增加序列事件,效果见
  4. drilldown :图表下钻事件,效果见 
  5. drillup : 图表上钻事件,效果见 
  6. redraw :图表重绘事件,效果见 
  7. selection : 图表范围选择事件,效果见
  8. beforePrint : 图表打印前事件
  9. afterPrint : 图表打印后事件

四、其他配置

1、图表类型

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

2、图表缩放

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

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

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

  • selectionMarkerFill :

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

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

3、3D 属性

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

3D 相关属性见: ,关于 3D 图形的详细教程将以单独文章形式给出。

4、其他

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

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

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

转载于:https://my.oschina.net/u/2845848/blog/746862

你可能感兴趣的文章
简单Excel表格上传下载,POI
查看>>
oracle user account locked
查看>>
【hibernate】Hibernate中get()和load()的区别
查看>>
OpenCV教程(44) harris角的检测(2)
查看>>
git stash
查看>>
python 字典操作
查看>>
httpd的一些知识点
查看>>
Apache开启Gzip压缩设置(转)
查看>>
分享一个牛逼的PHP无限极分类生成树方法,巧用引用(转)
查看>>
php_mcrypt.dll无法加载解决方法
查看>>
PHP5.4新特性(转)
查看>>
easyui在当前tab中直接加载url
查看>>
线程池原理
查看>>
leetcode-258-Add Digits
查看>>
python 某个目录下的所有文件列表
查看>>
HttpServlet详解
查看>>
转:Android之Tab分页标签的实现方法一-----TabActivity和TabHost的结合
查看>>
菜鸟修炼C语言小设计之——学生成绩管理系统
查看>>
Linux设备驱动工程师之路——设备模型(上)底层模型
查看>>
python基础补充
查看>>