Dimple.js多系列栏不堆叠 [英] Dimple.js multi series bar not stacked

问题描述

以下是示例代码...

  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 ：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（）; 
  

当我运行时，系列是堆叠起来的，基本上我需要显示系列一个旁边很容易比较....

我很新鲜，非常感谢任何帮助...

Vikram

解决方案

这种数据格式不适合dimple。当前图表不堆叠，条形实际上彼此重叠。要在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 Value：110000}，
 {ID：2，Measure：Value 2，Value：145000}，
 {ID：3 ：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  
 
Here is sample code...
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();
When I run, the series are stacked up and basically I need to show the series one beside other for easy comparison....

I am very new to this and appreciate any help...

Reg
Vikram
解决方案
That data format is not ideal for dimple.  The current chart is not stacked, the bars are actually overlapping each other.  To work simply in Dimple you need your data in the following format:
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 }
];
Then to do a properly stacked bar you can do the following:
chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", "ID");
chart.addMeasureAxis("y", "Value");
chart.addSeries("Measure", dimple.plot.bar);
chart.draw();
To do this as a grouped bar you could do it like this:
chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", ["Measure", "ID"]);
chart.addMeasureAxis("y", "Value");
chart.addSeries("Measure", dimple.plot.bar);
chart.draw();
In your case you are actually drawing the measures on different y axes. I'm afraid that doing grouped bars on separate axes is tricky, however there is a slightly hacky way to do it shown here: http://jsbin.com/jawig/1/edit?js,output

                        
这篇关于Dimple.js多系列栏不堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！