charts - Dimple.js 多系列栏未堆叠

Question

这是示例代码...

var svg = dimple.newSvg("#chartContainer", 600, 400),
chart = null,
s1 = null,
s2 = null,
x = null,
y1 = null,
y2 = null,
data = [
    { "ID" : "1", "Value 1" : 100000,  "Value 2" : 110000 },
    { "ID" : "2", "Value 1" : 90000,  "Value 2" : 145000 },
    { "ID" : "3", "Value 1" : 140000,  "Value 2" : 60000 }
];

chart = new dimple.chart(svg, data);
x = chart.addCategoryAxis("x", "ID");
y1 = chart.addMeasureAxis("y", "Value 1");
y2 = chart.addMeasureAxis("y", "Value 2");
s1 = chart.addSeries(null, dimple.plot.bar, [x, y1]);
s2 = chart.addSeries(null, dimple.plot.bar, [x, y2]);
chart.draw();

当我运行时，该系列会堆叠在一起，基本上我需要将该系列一个并排地显示以便于比较......

我对此很陌生，感谢您的帮助......

注册 维克拉姆

Answer 1

该数据格式对于酒窝来说并不理想。当前图表不是堆叠的，条形图实际上是相互重叠的。要在 Dimple 中简单地工作，您需要以下格式的数据:

data = [
    { "ID" : "1", "Measure" : "Value 1", "Value" : 100000 },
    { "ID" : "2", "Measure" : "Value 1", "Value" : 90000 },
    { "ID" : "3", "Measure" : "Value 1", "Value" : 140000 }
    { "ID" : "1", "Measure" : "Value 2", "Value" : 110000 },
    { "ID" : "2", "Measure" : "Value 2", "Value" : 145000 },
    { "ID" : "3", "Measure" : "Value 2", "Value" : 60000 }
];

然后要制作正确堆叠的栏，您可以执行以下操作:

chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", "ID");
chart.addMeasureAxis("y", "Value");
chart.addSeries("Measure", dimple.plot.bar);
chart.draw();

要以分组栏的形式执行此操作，您可以这样做:

chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", ["Measure", "ID"]);
chart.addMeasureAxis("y", "Value");
chart.addSeries("Measure", dimple.plot.bar);
chart.draw();

在您的情况下，您实际上是在不同的 y 轴上绘制度量。恐怕在单独的轴上进行分组条形图很棘手，但是这里显示了一种稍微有点老套的方法:http://jsbin.com/jawig/1/edit?js,output