酒窝js饼图

Question

我希望能够通过 dimple js 制作饼图。我有以下数据：

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

我只想要两个饼图，一个显示 60%，另一个显示 90%。然而，酒窝不是这样工作的。

我最终不得不执行以下操作（摘自 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 无法区分销售和非销售，它只是用图表表示我已经通过的数据点（销售和虚拟销售）的百分比在里面，这并不理想

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

酒窝js饼图

dimple js pie chart

d3.js

dimple.js