Dimple.js多系列吧不能堆疊

下面是示例代碼...Dimple.js多系列吧不能堆疊

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();

當我運行，該系列產品堆疊起來，基本上我需要顯示爲便於比較該系列另外一個身邊.. ..

我很新的這一點，並感謝所有幫助...

註冊維克拉姆

來源

2014-07-09 user3820536

數據格式爲不理想的酒窩。目前的圖表沒有堆疊，這些條形實際上是相互重疊的。要酒窩只是工作，你需要在以下格式的數據：

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

來源

2014-07-10 09:08:50

謝謝約翰...我會嘗試 – user3820536

嗨，約翰，基本上我在尋找比較兩個參數並排。例如，在一年中，我需要每個月以並列方式顯示每個月的銷售額與購買價值。 – user3820536

最簡單的方法是使用另一個函數來「爆炸」從服務器，假設這是高性能的你。由於圖表數據只是原始的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); 
    ... 
    });

希望幫助！這就是我所做的，無論如何

來源

2014-10-06 09:56:52

Dimple.js多系列吧不能堆疊

回答

相關問題