柱状图是用竖直的柱子来展现数据，一般用于展现横向的数据变化及对比。

条形图是用横向的柱子来展现数据，一般用于纵向的数据排名及对比。


图4-7 Highcharts 柱状图

  • 柱状图配置：针对当前数据列有效
  • ：针对当前页面的所有柱状数据列有效

条形图其实就是 X、Y 轴对调的柱状图，在 Highcharts 的内部实现里，条形图是在柱状图的基础上加了 配置，所以条形图的配置参数和柱状图是完全一样的。

柱状图和条形图 - 图2
图4-8 Highcharts 条形图

柱状图相关的配置参考 API 文档：

  • 条形图配置：针对当前数据列有效
  • ：针对当前页面的所有条形数据列有效

通过设置 dataLabels.inside = true 可以将数据标签放置在柱子内部

  1. plotOptions: {
  2.         dataLabels: {
  4.         }
  6. }

通过设置 dataLabels.allowOverlap = true 可以避免数据标签因重叠而不显示的问题

通过在网格里绘制多个条形图可以实现格子图效果，下面是用 HTML 表格及 4 个条形图来实现的格子图示例：