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

Answer 2

最简单的方法是使用另一个功能来爆炸＆＃34;从服务器返回的数据，假设这是适合您的。由于图表数据只是原始的Javascript对象，因此非常容易且无痛。

例如：

  var explodeData = function (oldData) {
    var newData = [];
    foreach(row in oldData) {
      newData.push({ID: row["ID"], MeasureType: "Value 1", Value: row["Value 1"]});
      newData.push({ID: row["ID"], MeasureType: "Value 2", Value: row["Value 2"]});
    }
    return newData;
  };

  d3.csv("/data", function (rawData) {
    var data = explodeData(rawData);
    var myChart = new dimple.chart(svg, data);
    ...
  });

希望有所帮助！这就是我做的，无论如何

Dimple.js多系列酒吧没有堆叠

2 个答案: