本节主要讲解图表配置，对应的 API 位置为 chart，主要内容包括图表全局样式、绘图区、图表事件、等相关内容。

一、图表容器

Highcharts 实例化中绑定容器的方式有很多种方式，这里列举三种：

1、通过构造函数

  1. var charts = Highcharts.chart('container', {
  2.   // Highcharts 配置
  3. });

2、或者通过 chart.renderTo 来指定

  1. var charts = Highcharts.chart({
  2.     // Highcharts 配置
  3.     chart : {
  4.         renderTo : 'container'  // 或 document.getElementById('container')
  5.     }
  6. });

3、如果你的页面已经引入了 jQuery，那么还可以 jQuery 插件的形式调用

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

关于 Highcharts 的构造函数详见 API 文档

二、图表样式

1、宽度、高度

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

  1. <div id="container" style="width:400px;height:400px"></div>

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

  1. <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
  • 其他样式：其他属性例如字体等属性，实例代码
    示例代码：
  1. chart: {
  2.     style: {
  3.         fontFamily: "",
  4.         fontSize: '12px',
  5.         fontWeight: 'bold',
  6.         color: '#006cee'
  7.     }
  8. }

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

3、图表绘图区

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

  • plotBackgroundColor ： 绘图区背景颜色
  • plotBackgroundImage ： 绘图区背景图片
  • plotBorderColor ： 绘图区边框颜色
  • 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 ：选中背景色，详细参考 API 文档
  • panKey：平移键，默认是 “Shift”，即在启用平移后，按住指定的按键即可对图表进行平移操作，在线试一试
  • panning ： 是否启用平移，启用平移后，按住平移键，然后就可以用鼠标对图表进行平移操作（即平移操作是平移键加鼠标拖动）

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

原文: https://www.hcharts.cn/docs/basic-chart