酒窩js餅圖

Question

我希望能夠通過酒窩js製作餅圖。我有以下數據：

var data = [{'month': monthNames[3], 'percentonsale': 60}, 
       {'month': monthNames[10], 'percentonsale': 90}] 

我簡直喜歡兩個餅圖，一個顯示60％，另一個顯示90％。但是，Dimple不能這樣工作。

我最終不得不做如下設置（Dimple.js multi series bar not stacked拍攝）：

var explodeData = function (oldData) { 
    var newData = []; 
    _.forEach(data, function(row) { 
    newData.push({month: row.month, salesstart: row.salesstart, percentonsale: row.percentonsale, value: .5}); 
    newData.push({month: row.month, salesstart: row.salesstart, percentonsale: (100 - row.percentonsale), value: .5}); 
    }) 
    return newData; 
}; 

是否有酒窩的一些方法，使一個餅圖，我只是把它傳遞一個百分比，它使基於餅圖在那？問題是我想繪製出售物品的百分比。如果我必須創建這個虛擬數據，Dimple無法區分出售和不出售，它只是顯示了我通過的數據點的百分比（在售和虛擬出售） in並且這並不理想

Answer 1

您不能讓Dimple繪製餅圖的一部分，而沒有實際表示您傳入的數據，則無法推斷其餘部分。您將有1）在另一個屬性添加到密鑰系列斷之間「發售」，「不出售」區分：

var data = [ 
    {'month': 'march', 'percent': 60, 'type' : 'on-sale'}, 
    {'month': 'october', 'percent': 90, 'type' : 'on-sale'} 
]; 

和2）通過數據循環計算每個剩餘創建每個相對的行，然後圖表：

data.forEach(function(d,i){ 
     var svg = dimple.newSvg("#chartContainer", 300, 100); 

     var oppositeRow = { 
       'month' : d.month, 
       'type' : 'not-on-sale', //this is your series key 
       'percent' : (100 - d.percent) 
       }; 

     var newData = [d, oppositeRow]; 
     var myChart = new dimple.chart(svg, newData); 
     myChart.addMeasureAxis("p", "percent"); 
     myChart.addSeries("type", dimple.plot.pie); 
     myChart.draw(); 
}); 

這會給你一個單獨的餅圖每個月，像這樣的：

如果你有機會到數據被創建可能更容易編輯它，否則您將需要在javascript中操作它以根據需要進行格式化。

這個例子可以在這裏找到：http://jsbin.com/nuvihu/1/edit?js,output