(一)背景介绍

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

MpAndroidChart 柱状图 颜色绘制不同 柱状图怎么不同颜色_自定义




(二)实现步骤

第1步,新建仪表板,添加柱形图

新建一个空白仪表板,然从工具相中拖拽【堆叠柱状图】到仪表板设计界面。从右侧的【数据绑定】面板中选择数据集。我们这里以【销售明细-仪表板】数据集为例。



然后,我们将【销售金额】字段拖拽到【数值】区域;将【销售大区】拖拽到【分类】区域。

MpAndroidChart 柱状图 颜色绘制不同 柱状图怎么不同颜色_柱状图_02

第2步,为图表的【分类】和【系列】绑定同一个字段

这时,我们看到堆叠柱状图每个柱子的颜色都是一样的,为了让每个柱子显示不同的颜色,我们可以继续将【销售大区】字段拖拽到【系列】区域中,如下图:

MpAndroidChart 柱状图 颜色绘制不同 柱状图怎么不同颜色_拖拽_03




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



第3步,自定义每个柱子的颜色

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

MpAndroidChart 柱状图 颜色绘制不同 柱状图怎么不同颜色_自定义_04




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

MpAndroidChart 柱状图 颜色绘制不同 柱状图怎么不同颜色_柱状图_05



关于自定义图表颜色的详细操作步骤,

第4步,更多堆叠柱状图的颜色控制

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


特别说明:

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

MpAndroidChart 柱状图 颜色绘制不同 柱状图怎么不同颜色_自定义_06