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



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

我能看到将其破解成.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>

最新更新