酒窝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