文档章节

图表配置(Chart)

北國丶江山
 北國丶江山
发布于 2016/09/14 17:20
字数 952
阅读 23
收藏 1

一、图表容器

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> 

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

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. beforePrint : 图表打印前事件
  9. afterPrint : 图表打印后事件

四、其他配置

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 在外部对图表进行自适应操作,在线试一试

© 著作权归作者所有

共有 人打赏支持
北國丶江山
粉丝 0
博文 31
码字总数 12905
作品 0
成都
程序员
私信 提问
网页图表Highcharts实践教程之外层图表区

网页图表Highcharts实践教程之外层图表区 Highcharts图表区 图表区是图表的基本区域。所有的数据和图形都是绘制在图表区中。从图形绘制范围来分,图表区域分为外层图表区和绘图区。本章将详细...

大学霸
2015/05/28
0
0
网页图表Highcharts实践教程之图表区

网页图表Highcharts实践教程之图表区 网页图表Highcharts图表区 图表区是图表的基本区域。所有的数据和图形都是绘制在图表区中。从图形绘制范围来分,图表区域分为外层图表区和绘图区。本章将...

大学霸
2015/06/05
0
0
Echarts使用心得总结(二)

前言: 前一段时间一直都挺忙的,各种事,也没来得及每周的总结,趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下,趁着周末跟大家分享一下。之前写过一篇相关的文章...

andrewniu
2017/11/14
0
0
MSChart图表控件的一些使用

最近使用MSChart做了几张图表,微软提供的例子中对这个图表控件的使用已经说的比较详细了,我这里记录一些需要注意的。 1. Chart图表的元素 要使用该图表首先要了解该图表的元素组成,就是下...

吞吞吐吐的
2017/07/07
0
0
Echarts使用心得总结(二)

Echarts使用心得总结(二) 前言: 前一段时间一直都挺忙的,各种事,也没来得及每周的总结,趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下,趁着周末跟大家分享一...

双月通天
2014/07/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

对接比特币钱包的PHP开发包

BtcTool是一个基于第三方服务和离线裸交易实现的PHP比特币应用开发包,适合不希望部署本地 节点旳PHP开发者,开发包主要包含以下特性: 利用第三方服务获取指定地址的utxo集合 离线生成消费裸...

汇智网教程
17分钟前
1
0
【自用】 VHD to VHDX

VHDX: 在VHD 2TB 的基础上提供 64TB的容量。 支持逻辑扇区大小为 4KB,和每块的大小为 256MB,来优化虚拟磁盘性能。 比VHD提供更高的安全性、可靠性和性能。 convert-VHD –path d:\Hyper-v...

Tensor丨思悟
30分钟前
1
0
30 岁转行做Python开发晚吗?而且是零基础

最近有小伙伴问小编,30 岁转行做Python开发晚吗? 小编想说,其实无论男女,只要想学,有这个动力,就直接去行动。无论年龄,无论性别,只要你想一直勇往直前,那么想做的就去做吧~这里有一...

糖宝lsh
40分钟前
10
0
详解Spring中的Profile

前言 由于在项目中使用Maven打包部署的时候,经常由于配置参数过多(比如Nginx服务器的信息、ZooKeeper的信息、数据库连接、Redis服务器地址等),导致实际现网的配置参数与测试服务器参数混淆...

watermelon11
55分钟前
4
0
phper必知必会(二)

  1.说说你对进程,线程以及协程的理解      进程:是系统进行资源分配和调度的基本单位,是基本操作系统结构的基础。进程是程序基本执行的实体。进程与进程之间是独立的,拥有完全独立...

SEOwhywhy
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部