柱形图

本章节我们将为大家介绍几种柱形图的类型。

基本柱形图

chart 配置

设置 chart 的 type 属性 为 column ，chart.type 描述了图表类型。默认值为 "line"。

var chart = {
   type: 'column'
};

实例

反向柱形图

堆叠柱形图

堆叠组柱形图

按百分比堆叠柱形图

配置

plotOptions：数据点选项

plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型，其属性设置略微有些差异。

配置图表堆叠设置 plotOptions.area.stacking 为 "percent"。如果禁用堆叠使用 null。

var plotOptions = {
   column: {
      stacking: 'percent'      
   }
};

实例

标签旋转柱形图

dataLabels : 数据标签

dataLabels 定义图上是否显示数据标签。

文本旋转程度由 rotation 属性决定。我们还可以通过其他属性来定义文本标签的背景，间隔，边框等。

dataLabels = {
   enabled: true,
   rotation: -90,
   color: '#FFFFFF',
   align: 'right',
   format: '{point.y:.1f}', // 一个小数
   y: 10, // 从上到下 10 像素
   style: {
      fontSize: '13px',
      fontFamily: 'Verdana, sans-serif'
   }
}

实例

向下钻取柱形图

配置 drilldown：向下钻取

drilldown 用于向下钻取数据，深入到其中的具体数据。

drilldown: {
   series: drilldownSeries
}

实例

固定布局柱形图

series.pointPadding配置

控制每列之间的距离值，当highcharts图表宽度固定的情况下，此值越大，柱子宽度越小，反之相反。默认此值为0.1

series.pointPlacement配置

在柱形图中，当 pointPlacement 设置为 "on" 时, X轴上的点没有间隔。如果 pointPlacement 设置为 "between", 列之间按刻度进行布局。

在 Highcharts 3.0.2 后的版本, pointPlacement 可以支持数字，0 为轴上的值， -0.5 为当前值与前面一个值的间隔， 0.5 为 当前值与下一个值的间隔。 不同与文字设置选项，数字设置不影响轴之间的间隔。

series: {
   name: 'Employees',
   color: 'rgba(165,170,217,1)',
   data: [150, 73, 20],
   pointPadding: 0.3,
   pointPlacement: -0.2
}

实例

使用 html 表格数据的柱形图

在 data 下添加 table 配置。

data

数据模块提供了一些简单的接口用于添加数据，我们可以使用例如 CVS, HTML 表格或者网格视图中的数据。

data.table

Html 表格中设置id，并对应参数 data.table 即能解析数据。相关设置选项有 startRow, endRow, startColumn 和 endColumn 。

data: {
   table: 'dataTable'  
}

实例

区间柱形图

chart 配置

配置 chart 的 type 为 'columnrange' 。chart.type 描述了图表类型。默认值为 "line"。

var chart = {
   type: 'columnrange',
   inverted: true
};

实例