在 Dimple.JS 中创建不完整的饼图答案

【问题标题】：Creating an incomplete pie chart in Dimple.JS在 Dimple.JS 中创建不完整的饼图
【发布时间】：2017-07-30 14:02:37
【问题描述】：

我有一个饼图，需要缺少 10% 的缺失切片。我有以下代码，但馅饼总是 100%。

        var myChart = new dimple.chart(svg, data);
        myChart.setBounds(50, 50, 180, 180);
        myChart.defaultColors = chartOptions.colors;
        myChart.data.startAngle = 0;
        myChart.data.endAngle = (2 * Math.PI * 0.9);

        myAxis = myChart.addMeasureAxis('p', 'amount');

        var mySeries = myChart.addSeries('legend', dimple.plot.pie);

如何使馅饼小于 100%？上例需要 pe 为 90%。

【问题讨论】：

标签： javascript charts pie-chart dimple.js

【解决方案1】：

我可以看到 hack 进入dimple.js 的唯一方法是使用假数据点，您在抽签后隐藏：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.4.6" data-semver="3.4.6" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>
  <script data-require="dimplejs@2.1.2" data-semver="2.1.2" src="//cdnjs.cloudflare.com/ajax/libs/dimple/2.1.2/dimple.latest.min.js"></script>
</head>

<body>
  <script>
  
    var svg = d3.select('body')
      .append('svg')
      .attr('width', 500)
      .attr('height', 500);
  
    var data = [
      { "legend":"one", "amount": 2000 },
      { "legend":"two", "amount": 2000 * 0.10 }
    ];

    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(50, 50, 180, 180);
    myAxis = myChart.addMeasureAxis('p', 'amount');
    var mySeries = myChart.addSeries('legend', dimple.plot.pie);

    myChart.draw();
    
    d3.select(".dimple-two")
      .style("display", "none");
      
  </script>
</body>

</html>

【讨论】：