Padding Between Pie Charts in chart js(图表js中饼图之间的填充)
问题描述
我正在使用 chart.js 进行项目,我需要知道是否有办法在饼图的数据集之间添加一些空间.
I am working on a project using chart.js for work and I need to know if there is a way to add some space between datasets of a pie chart.
到目前为止,我在下面的图表中看到了,我希望内部和外部数据集之间有一些填充.
What I have so far is in the chart depicted below, and I want there to be some padding between the inner and outer datasets.
我尝试将其中一个图表设置为 doughnut 类型或在内部图表上添加更厚的外边框,但这些都不是我需要的.
I have tried setting one of the charts to a doughnut type or adding a thicker outer border on the inner chart, and neither of those are what I needed.
推荐答案
您可以通过在两个现有数据集之间添加一个空数据集并定义一个 weight
空数据集和内部数据集的属性.
You can obtain the desired result by adding an empty dataset between the two existing ones and defining a weight
property on the empty and the inner dataset.
const colors = ["#FF6384", "#36A2EB", "#FFCE56"];
var pieChart = new Chart("myChart", {
type: 'pie',
data: {
labels: ["Red", "Blue", "Yellow"],
datasets: [{
data: [8, 5, 6],
backgroundColor: colors,
},
{
weight: 0.2
},
{
data: [5, 7, 4],
backgroundColor: colors,
weight: 1.2
}]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>
这篇关于图表js中饼图之间的填充的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:图表js中饼图之间的填充
基础教程推荐
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01