五、基础教程-图表配置
2017-08-06 20:17
218 查看
本节主要讲解图表配置,对应的 API 位置为 chart,主要内容包括图表全局样式、绘图区、图表事件、等相关内容。
一、 图表容器
Highcharts 实例化中绑定容器的方式有很多种方式,这里列举三种: 1. 通过 dom 调用 highcharts() 函数的方式
$("#container").highcharts({ // Highcharts 配置 });
2. 通过 chart.renderTo 来指定
var charts = new Highcharts.Chart({ // Highcharts 配置 chart : { renderTo : "container" // 注意这里一定是 ID 选择器 } });
3. 通过构造函数
var charts = new Highcharts.Chart('container', { // Highcharts 配置 });
二、图表样式
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>
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' } }
3. 图表绘图区
图表绘图区的可配置属性有: * plotBackgroundColor : 绘图区背景颜色 * plotBackgroundImage : 绘图区背景图片 * plo 9fcf tBorderColor : 绘图区边框颜色 * plotBorderWidth : 绘图区边框宽度 * plotShadow : 绘图投影
三、事件
* click :图表点击事件 * load :图表加载完后事件 * addSeries :图表增加序列事件 * drilldown :图表下钻事件 * drillup : 图表上钻事件 * redraw :图表重绘事件 * selection : 图表范围选择事件 * beforePrint : 图表打印前事件 * afterPrint : 图表打印后事件
四、其他配置
1. 图表类型
通过 chart.type 来指定图表类型,表示如果默认图表类型,即如果 series 中没有指定 type, 那么图表的类型就由该属性来确定。highcharts 支持的所有图表类型见 plotOptions。
2. 图表缩放
图表缩放包括缩放(zoom)和平移(pan),对应的属性有: * zoomType : 缩放类型,值可以是 “x”、“y”、“xy”,分别表示水平缩放、竖直缩放、平面缩放 * 缩放恢复按钮:可以指定按钮的样式、位置等,见 resetZoomButton,按钮的文字可以通过 lang 中的属性来指定 * selectionMarkerFill :选中背景色 * panKey:平移键,默认是 “Shift”,即在启用平移后,按住指定的按键即可对图表进行平移操作 * panning : 是否启用平移,启用平移后,按住平移键,然后就可以用鼠标对图表进行平移操作
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 在外部对图表进行自适应操作
相关文章推荐
- Highcharts基础教程(二):图表配置
- Highchart基础教程-图表配置
- 从零构建AR APP新手教程【U3D篇】(1)-项目概述、基础配置
- 【Firebreath】基础教程之一:安装配置
- Win2008服务器或VPS安全配置基础教程
- Activiti基础教程--02(初识Activiti流程设计工具、了解Activiti bpmn图表对应的XML文件)
- Hadoop基础教程-第9章 HA高可用(9.2 HDFS 高可用配置)(草稿)
- Windows Server 2012活动目录基础配置与应用(新手教程)之11--发布共享的文件夹
- Windows Server 2012活动目录基础配置与应用(新手教程)之2----创建域控制器
- 【Heritrix基础教程】在Eclipse中配置Heritrix
- 倍福TwinCAT(贝福Beckhoff)基础教程1.2 TwinCAT安装配置
- Oracle VM + centos7.1+openstack kilo 多结点安装教程---基础环境配置(2)
- 微信小程序服务器配置基础教程
- 【Nutch2.2.1基础教程之3】Nutch2.2.1配置文件 分类: H3_NUTCH 2014-08-18 16:33 1376人阅读 评论(0) 收藏
- ArcGIS教程:修改图表的基础知识
- Yii2.0视频教程-基础配置
- Spring基础学习教程(Spring配置文件详解)-03
- linux基础教程--安装JDK并配置环境变量
- plupload queue widget配置基础教程