dimple.js 中的堆积条形图

Question

我是 dimple.js 和 d3 的新手。对于我的一个测试执行报告工具，我需要显示一个描述执行状态的图表。此图表应为 stacked bar chart 类型。

我的示例数据如下，

var data = [{
                "run-id": 25,
                "TotalCount": 100,
                "Pass": 50,
                "Fail": 30,
                "Skip": 20
        }, {
               "run-id": 26,
                "TotalCount": 50,
                "Pass": 35,
                "Fail": 15,
                "Skip": 5
        }, {
               "run-id": 27,
                "TotalCount": 60,
                "Pass": 40,
                "Fail": 5,
                "Skip": 15
        }];

我想将输出图表作为具有 3 个条形图的堆叠条形图（对于上述数据），每个运行个 id。还应在其条形图区域（内部）

中写入个人计数（通过|失败|跳过）

我是 dimple.js 的新手，正处于提升阶段。尝试了以下解决方案，但这没有用。

chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", "run-id");
chart.addMeasureAxis("y", "TotalCount");
series = chart.addSeries(["Pass", "Fail","Skip"], dimple.plot.bar);
chart.draw()

任何人都可以help/hint我前进吗？

Answer 1

据我所知，您必须格式化数据，这样才能生成堆栈栏。我附上了您数据的更新版本并为您创建了堆积条。 check here for writing value in bar

StackBar

dimple.js 中的堆积条形图

stacked bar chart in dimple.js

d3.js

dimple.js