双横轴的柱状图

收藏

本帖最后由 Bella.Yuan 于 2024-10-8 12:09 编辑

最近发现大家针对图表这块有时有一些特殊的需求。针对特殊的需求，我们需要不同的实现方法，最近看到这个图表需求，双横轴的柱状图，数值有负数，但是0的横轴依旧需要显示，那针对这个需求该如何实现，下面我们就来一起看看具体实现过程吧。

实现方法：使用多绘图区域来实现

1、图表组件选择柱形图，添加多个绘图区域（2个绘图区域），选择不同的绘图区域绑定对应的数据，这里我的数据如下：

数据：

复制代码

添加绘图区域：

绑定数据：

2、设置各个轴的属性

1）将2个柱子调整成1个柱子，这里调整任意一个绘图区域的不透明度

2）y轴有2个，取消多余的y轴

3）有2个横轴，修改一个横轴从原点0开始

4）取消纵轴的网格线

5）取消横轴的坐标标签显示

3、预览效果：

这里为了显示更直观，我修改了坐标轴的样式

附件是实现后的demo，大家若有需要，可以下载后导入自己的环境看看。

		自动登录	找回密码
密码			立即注册

[报表] 双横轴的柱状图