Dimple.js：如何为分组条形图中的组背景着色？

Question

请参阅屏幕截图：

我想知道如何使用背景颜色为分组条形图中的组着色。

我知道series.afterDraw中显示public void doPost(HttpServletRequest request, HttpServletResponse response) { try { String json = "{\"organization\":null}"; JsonParser jsonParser = new JsonParser(); JsonObject rootobj = (JsonObject) jsonParser.parse(json); User_Objects fillObj = new User_Objects(); fillObj.setCommEmail(rootobj.get("organization").getAsString()); request.setAttribute("reqObj", fillObj); RequestDispatcher view = request.getRequestDispatcher("/test.jsp"); view.forward(request, response); } catch (Exception e) { System.out.println("Exception>>>>>>>" + e); } } 可以是进行此类自定义的一种方法。但需要帮助确定构成每个组的坐标。

或者还有其他方法可以实现同样的目标吗？

Answer 1

我可以通过以下方式完成此任务：

1. 计算每组的最大值
2. 在y轴上绘制一个最大值
的背景图表
3. 将分组的条形图与背景图表顶部的原始数据重叠

相同的代码是：

// Create the svg and set the dimensions
var svg = dimple.newSvg("#chartContainer", 400, 400);

// Sample data for grouped bar chart
var data = [
    {id: 1, type: "t1", count: 10},
    {id: 1, type: "t2", count: 5},
    {id: 1, type: "t3", count: 6},
    {id: 2, type: "t1", count: 5},
    {id: 2, type: "t2", count: 7},
    {id: 2, type: "t3", count: 3}];

// Calculate maximum of each group.
// This will be the y axis value of background chart
var maximums = [{id: 1, max: 10}, {id: 2, max: 7}];

// Create background chart
var chart1 = new dimple.chart(svg, maximums);
var x1 = chart1.addCategoryAxis("x", "id");
var y1 = chart1.addMeasureAxis("y", "max");
chart1.addSeries(null, dimple.plot.bar);
chart1.defaultColors = [new dimple.color("#D3D3D3")];
chart1.draw();
// Remove axis titles of the background chart
x1.titleShape.remove();
y1.titleShape.remove();

// Overlay the actual chart on top of background chart
var chart2 = new dimple.chart(svg, data);
chart2.addCategoryAxis("x", ["id", "type"]);
chart2.addMeasureAxis("y", "count");
chart2.addSeries("type", dimple.plot.bar);
chart2.draw();

以下是该图表的屏幕截图：

Fiddle for the same is available here