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