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

Question

我有一个饼图需要缺失 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%。

Answer 1

我能看到破解到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>

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

Creating an incomplete pie chart in Dimple.JS

javascript

charts

pie-chart

dimple.js