1
A
回答
1
chart.js之没有选择切下一块会是这样。但你总是可以define your own chart type!
这里我将pie
图表转化为cutOutPie
类型。图表类使用updateElement
函数配置“饼图切片”,因此我覆盖它并移动元素的位置。详细信息可以通过reading the source找到。
Chart.defaults.cutOutPie = Chart.helpers.clone(Chart.defaults.pie);
Chart.controllers.cutOutPie = Chart.controllers.pie.extend({
updateElement: function(arc, index, reset) {
Chart.controllers.pie.prototype.updateElement.call(this, arc, index, reset);
var displacement = this.getDataset().displacements[index]||0;
var model = arc._model;
var angle = model.startAngle + model.circumference/2;
model.x += Math.cos(angle) * displacement;
model.y += Math.sin(angle) * displacement;
}
});
new Chart('chart', {
type: 'cutOutPie',
data: {
labels: ['a', 'b', 'c', 'd', 'e', 'f'],
datasets: [{
data: [1, 7, 2, 8, 3, 9],
backgroundColor: ['red', 'orange', 'green', 'gold', 'pink', 'blue'],
displacements: [0, 0, 40, 0, 0, 16],
}],
},
});
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" width="400" height="300"></canvas>
相关问题
- 1. 将偏移量定位到光标位置的Javascript偏移量
- 2. 反向时区偏移量
- 3. 数组偏移量和位#
- 4. Matplotlib极坐标图径向轴偏移量
- 5. 方向偏移
- 6. GWT TimeZone偏移是否向后偏移?
- 7. 处理3 - PVector路径偏移//向内/向外多边形偏移
- 8. 确定图像偏移量
- 9. iOS iCarousel图像偏移量
- 10. Internet Explorer图像偏移量
- 11. 谷歌饼图切片传递值通过变量为偏移
- 12. UINavigationController偏移量
- 13. UIBarButtonItem偏移量
- 14. 从偏移量中选择一部分数据从偏移量到偏移量
- 15. 为什么投影偏移量向左?
- 16. 向jsPlumb锚定添加偏移量
- 17. 指向成员的偏移量
- 18. 根据点偏移量计算方向
- 19. 方法位置的偏移量
- 20. XNA鼠标位置偏移量
- 21. 鼠标位置和偏移量
- 22. 在C++中获取位偏移量
- 23. 如何向下移动饼图?
- 24. OpenLayers矢量图层显示偏移量
- 25. Highcharts饼片偏移的传奇点击
- 26. 绝对位置在所有方向上都有0偏移量
- 27. 跳转声明偏移或位移?
- 28. 将元素偏移量添加到jQuery偏移量计算中
- 29. 从全局偏移量表中查找负载偏移量
- 30. Draw2D图与偏移获取位置
谢谢!我实际上正在玩Javascript,很容易找出破解的方法。但是,感谢您给出一个完美的例子,展示如何做到干净! – joakimk
它的效果很好,除了一件事情:偏移的饼图片段落在图表区域之外,所以它们被裁剪掉。要么扩大区域以腾出空间(给出最大的位移),要么必须类似地减小馅饼的半径。我认为或者会有相同的结果,视觉?我尝试在'updateElement'中减少'this.chart.outerRadius'等,但没有任何变化。 – joakimk
您可以尝试['Chart.defaults.global.layout = {padding:100}'](http://www.chartjs.org/docs/#chart-configuration-layout-configuration)作为快速解决方法,但是将减少整个图表的大小。 – kennytm