酒窝js饼图

Question

我希望能够通过dimple 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中是否有某种方法可以制作一个饼图，我只是将它传递给它一个百分比，并根据它创建一个饼图？问题是，我想绘制出售物品的百分比。如果我必须创建这个虚拟数据，Dimple无法区分销售和非销售，它只是描绘了我通过的数据点（销售和虚拟销售）的百分比in are and this is not ideal

Answer 1

你不能将凹坑绘制成饼图的一部分，而不是实际用你传入的数据表示，它不能推断余数。你将不得不1）添加另一个属性来关键系列，以区分＆＃34;出售＆＃34;并且＆＃34;不发售＆＃34; ：

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