【仪表板-图表设计】仪表板中为柱形图/条形图的每个柱子设置为不同颜色

收藏

本帖最后由 Eden.Sun 于 2023-1-5 18:48 编辑

（一）背景介绍
在进行仪表板设计时，为了整个界面更加美观，有的时候我们希望为柱状图、条形图的每个柱子设置不同的颜色。要实现这个需求，我们可以使用【堆叠柱状图】、【堆叠条形图】、【极坐标放射堆叠柱状图】，或者【极坐标堆叠柱状图】。
image.png111997069.png

（二）实现步骤
第1步，新建仪表板，添加柱形图
新建一个空白仪表板，然从工具相中拖拽【堆叠柱状图】到仪表板设计界面。从右侧的【数据绑定】面板中选择数据集。我们这里以【销售明细-仪表板】数据集为例。

然后，我们将【销售金额】字段拖拽到【数值】区域；将【销售大区】拖拽到【分类】区域。
image.png563763122.png

第2步，为图表的【分类】和【系列】绑定同一个字段
这时，我们看到堆叠柱状图每个柱子的颜色都是一样的，为了让每个柱子显示不同的颜色，我们可以继续将【销售大区】字段拖拽到【系列】区域中，如下图：
image.png829934387.png

这样，我们就达到每个柱子显示不同颜色的需要。如果你想对每个颜色进行修改，你可以使用图表的自定义调色板功能。

第3步，自定义每个柱子的颜色
选择图表组件，在右侧的属性窗格中，找到【调色板】属性。点击右侧的下拉箭头，你可以看到调试版支持三种类型，如果你想对每个柱子的颜色进行修改，你可以选择第三种类型【自定义】。
image.png806398925.png

点击底部的【新建调色板】之后，你就可以修改调色板中的颜色，或者添加新的颜色系列。
image.png823499145.png

关于自定义图表颜色的详细操作步骤，可以参考：https://help.grapecity.com.cn/pages/viewpage.action?pageId=38483125#id-%E5%9B%BE%E8%A1%A8%E6%A0%B7%E5%BC%8F-%E6%B7%BB%E5%8A%A0%E8%87%AA%E5%AE%9A%E4%B9%89%E8%B0%83%E8%89%B2%E6%9D%BF

第4步，更多堆叠柱状图的颜色控制
按照上面的方法，我们还可以为【堆叠条形图】、【极坐标放射堆叠柱状图】，或者【极坐标堆叠柱状图】中每个柱子设置不同的颜色。

特别说明：
按照以上方法也可以普通/簇状【柱形图】的每个柱子设置不同颜色，但是每个柱子就会非常的细，不便于数据的阅读。下图展示了【柱状图】和【堆叠柱状图】的效果区别。
image.png65590819.png

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

【仪表板-图表设计】仪表板中为柱形图/条形图的每个柱子设置为不同颜色

0 个回复

活字格认证

圣诞拼拼乐

微信认证勋章

讲师达人

元老葡萄

悬赏达人