如何在Dimple垂直分组柱状图中堆叠同系列记录

需求说明 #

现有Dimple分组柱状图，部分系列存在两条记录，希望实现同一「Channel」的数值堆叠显示，同时保留分组柱状图基于「Channel」的颜色规则和图例。

样式说明 #

示例包含四种柱状图样式：

• (a) 标准样式：同一Channel的数值合并为单个柱形，通过代码 var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]); 实现
• (b) 叠加样式：同一Channel下不同Status的数值并列显示，通过代码 var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel", "Status"]); 实现
• (c) 目标堆叠样式：同一Channel下不同Status的数值堆叠，总高度与标准样式一致，且柱形颜色保持统一
• (d) 理想最优样式：在堆叠基础上，未来（Future）数值的柱形带有透明度

数据示例 #

{"Price Tier":"Regular","Channel":"Hypermarkets","Unit Sales":"5489","Status":"Actual"},
{"Price Tier":"Regular","Channel":"Hypermarkets","Unit Sales":"1651","Status":"Future"}

问题 #

• 如何将(b)的叠加柱形改为(c)的堆叠样式？修改Dimple源码和使用 series.afterDraw 哪种方式更合适？
• 实现(d)的最优样式时，是否可通过 series.afterDraw 选中对应元素并修改其透明度？

解决方案 #

已找到一种解决方案，通过堆叠分组柱状图结合变通方法实现(c)和(d)样式。详见下方自答内容。

对于开发者而言，该问题可为Dimple.js标准分组柱状图的代码优化提供思路，助力实现更优雅的无变通方案。

内容的提问来源于stack exchange，提问作者OuzoPower