柱状图和条形图

2023-08-03 23:25| 来源: 网络整理| 查看: 265

收起菜单教程目录柱状图和条形图

最后修改时间：2022-12-15 18:29

柱形图包括柱状图和条形图。

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

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

一、柱状图

图4-7 Highcharts 柱状图

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

柱状图配置：针对当前数据列有效柱状数据列配置：针对当前页面的所有柱状数据列有效二、条形图

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

图4-8 Highcharts 条形图

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

条形图配置：针对当前数据列有效条形数据列配置：针对当前页面的所有条形数据列有效三、特性及常见问题1、间距

柱形图中的间距包括柱子之间的间距及分组之间的间距，利用他们我们可以做出嵌套的柱状图、直方图等效果，直方图的示例如下：

plotOptions: { column: { pointPadding: 0, borderWidth: 0, groupPadding: 0, shadow: false } } 2、数据标签放置在柱子里

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

plotOptions: { column: { dataLabels: { inside: true } } }

3、数据标签重叠问题

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

4、格子图

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

本教程仅用于学习、研究和交流目的，欢迎非商业转载。转载请注明出处及完整的链接。

标题：柱状图和条形图 | Highcharts 使用教程

链接：https://www.hcharts.cn/docs/column-and-bar-charts/

上一篇下一篇目录简数科技微信，同步更新Highcharts教程

订阅更新

【本文地址】

今日新闻