React-Chart.js：如何增加图例和图表之间的空间？
有几个问题和我的问题是一样的。然而，这些问题只关注图表。js。我有一个类似的问题，但在反应图上。js。如何增加图例和图表之间的间距？我使用了填充，但它只会增加图例之间的间距。不完全是我想要的。下面是我的甜甜圈图表组件。
<div className="dougnut-chart-container">
<Doughnut
className="doughnut-chart"
data={
{
labels: ["a", "b", "c", "d", "e", "f"],
datasets: [
{
label: "Title",
data: [12821, 34581, 21587, 38452, 34831, 48312],
backgroundColor: [
'rgb(61, 85, 69)',
'rgb(115, 71, 71)',
'rgb(166, 178, 174)',
'rgb(209, 191, 169)',
'rgb(66, 63, 62)',
'rgb(43, 43, 43)',
]
}
],
}
}
options={
{
plugins: {
legend: {
labels: {
color: "white",
font: {
size: 12
},
padding: 10,
},
position: "left",
title: {
display: true,
text: "Title",
color: "grey",
padding: 10
}
}
},
elements: {
arc: {
borderWidth: 0
}
},
responsive: true,
maintainAspectRatio: true,
}
}
/>
</div>
我的图表是什么样子的：
共有2个答案
@LeeLenalee建议的这个答案对我有效。但是对于那些感到困惑并希望看到这种集成到他们的组件中的人来说，以下是我所做的：
<div className="dougnut-chart-container">
<Doughnut
className="doughnut-chart"
data={
{
labels: ["label_1", "label_2", "label_3", "label_4", "label_5", "label_6"],
datasets: [
{
label: "Title",
data: [12821, 34581, 21587, 38452, 34831, 48312],
backgroundColor: [
'rgb(61, 85, 69)',
'rgb(115, 71, 71)',
'rgb(166, 178, 174)',
'rgb(209, 191, 169)',
'rgb(66, 63, 62)',
'rgb(43, 43, 43)',
]
}
],
}
}
options={
{
plugins: {
legend: {
labels: {
color: "white",
font: {
size: 12
},
padding: 10,
},
title: {
display: true,
text: "A Longer Title To Occupy Space",
color: "grey",
padding: {
bottom: 10
},
font: {
size: 13
}
},
position: "left"
},
// this is the id that is specified below
legendDistance: {
padding: 130 // dictates the space
}
},
elements: {
arc: {
borderWidth: 0
}
},
responsive: true,
maintainAspectRatio: true,
}
}
plugins={
[
{
id: 'legendDistance',
beforeInit(chart, args, opts) {
// Get reference to the original fit function
const originalFit = chart.legend.fit;
// Override the fit function
chart.legend.fit = function fit() {
// Call original function and bind scope in order to use `this` correctly inside it
originalFit.bind(chart.legend)();
// Specify what you want to change, whether the height or width
this.width += opts.padding || 0;
}
}
}
]
}
/>
</div>
这就是结果：结果
注意：您需要重新加载页面以查看更改。
您可以编写一个自定义插件，如这个答案所示，但是您需要为图例框的宽度添加一些额外的行间距，而不是为高度添加一些额外的空间：
var options = {
type: 'doughnut',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
}]
},
options: {
plugins: {
legend: {
position: 'left'
},
legendDistance: {
padding: 50
}
}
},
plugins: [{
id: 'legendDistance',
beforeInit(chart, args, opts) {
// Get reference to the original fit function
const originalFit = chart.legend.fit;
// Override the fit function
chart.legend.fit = function fit() {
// Call original function and bind scope in order to use `this` correctly inside it
originalFit.bind(chart.legend)();
// Change the height as suggested in another answers
this.width += opts.padding || 0;
}
}
}]
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>-
问题内容： 我在我的盒子中使用虚线样式边框 我想增加边框的每个点之间的空间。 问题答案： 此技巧适用于水平和垂直边框： 您可以使用背景大小调整大小，并使用线性渐变百分比调整比例。在此示例中，我有一条虚线为1px的点，间距为2px。这样，您也可以使用多个背景使用多个虚线边框。 在这个尝试一下，或者看一下代码片段示例：
-
使用Chart.js2.0。我正在寻找一种在图表底部添加页脚（一行文本）的方法，以便显示数据源。 我尝试通过option对象来解决它，就像title和legend被包括和修改一样。像这样： 我在文档中几次提到了“footer”，以及样式化它或在“工具提示”上下文中使用它的方法，但还没有看到如何具体添加它。 编辑/更新：我找到了两种方法（但没有完美的解决方案）来在图表中添加页脚，同时尝试解决这个问题
-
echarts图例如何增加表格 表格和图例是一一对应的
-
可能吗？怎样 我曾尝试在多个图表、一个图例、多个图表Chart js等上切换Chart.js sync legend。但是，这些解决方案有一个带有图例的图表，并且该图例会影响其他图表。 我应该隐藏图表并只显示图例吗？我应该画一张没有数据的图表吗？ 如果你能告诉我，我就毕业了 HTML JS
-
我的php页面有多个动态饼图，我希望使用chart.js为每个饼图显示图例和标题 这是我的JS代码： PHP代码： 请建议我为每个饼图设置一个标题和图例。
-
问题内容： 我敢肯定有一个解决此问题的简单方法。基本上，如果我有两列，如何在它们之间添加一个空格？ 例如，如果html是： 输出将是彼此相邻的两列，占据了页面的整个宽度。假设将宽度设置为，则每个div都会很宽。 如果我想在两者之间留出空间，该如何实现？显然，通过引导程序自动使div大小成为补偿大小的每个大小 问题答案： 您可以使用此处记录的类来实现列之间的间距。间距是一致的，因此所有列均正确排列。
-
本文向大家介绍SQL中的视图和实例化视图之间的区别，包括了SQL中的视图和实例化视图之间的区别的使用技巧和注意事项，需要的朋友参考一下 我们知道任何数据库的主要组成部分都是它的表，为了使数据可访问性自定义，有了视图的概念，换句话说，我们可以说借助表的视图，我们可以限制任何用户仅访问该数据应该由他访问。现在，基于视图的特征和特征，我们可以区分视图和实体化视图。 以下是视图和实例化视图之间的重要区别。
-
添加以下代码后： 它正在流离失所