React-Chart.js：如何增加图例和图表之间的空间？
[英]React-Chart.js : How do I increase the space between the legends and chart?
问题描述
There are a couple of questions that run along the same lines as mine.
有几个问题与我的思路相同。 However, these questions focus on simply chart.js.然而，这些问题只集中在 chart.js 上。 I have a similar problem but on react-chart.js.我有类似的问题，但在 react-chart.js 上。 How do I increase the space between the legend and chart?如何增加图例和图表之间的空间？ I have used padding but it only increases the space between the legends.我使用了padding ，但它只会增加图例之间的空间。 Not quite what I wanted.不完全是我想要的。 Below is my doughnut chart component.下面是我的圆环图组件。
<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>
What my chart looks like:我的图表是什么样的：
3 个解决方案
解决方案1
0 2021-08-15 10:31:16
You can write a custom plugin as showed by this answer , but instead of adding some extra space to the height you will need to add some extra spacing to the width of the legend boxes:您可以编写一个自定义插件，如this answer所示，但不是在高度上添加一些额外的空间，而是需要在图例框的宽度上添加一些额外的间距：
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>
解决方案2
0 已采纳 2021-08-17 04:31:07
This answer suggested by @LeeLenalee works for me. @LeeLenalee 建议的这个答案对我有用。 But for those who are confused and wants to see this integrated in their components, here is what I did:但是对于那些感到困惑并希望将其集成到他们的组件中的人，这就是我所做的：
<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>
This is the result: result这是结果：结果
Take note: You need to reload your page to see the changes.请注意：您需要重新加载页面才能看到更改。
解决方案3
0 2022-05-31 19:29:46
for react you can try this code ->对于反应，你可以试试这个代码 - >
const legendMargin = {
id: "legendMargin",
beforeInit: function (chart) {
const fitValue = chart.legend.fit;
chart.legend.fit = function fit() {
fitValue.bind(chart.legend)();
return (this.height += 40);
};
}
};
then just need to pass legendMargin as a props like this way然后只需要像这样将legendMargin作为道具传递
<Bar options={options} data={data} plugins={[legendMargin]} />
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.