图表配置

优质

小牛编辑

117浏览

2023-12-01

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

一、图表容器

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

1、通过构造函数

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

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

var charts = Highcharts.chart({
    // Highcharts 配置
    chart : {
        renderTo : 'container'  // 或 document.getElementById('container')
    }
});

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

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

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

二、图表样式

1、宽度、高度

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

<div style="width:400px;height:400px"></div>

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

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

三、事件

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