如何设置图例标签和折线图顶点之间的边距底部
您可以利用Chart.js中的插件选项来扩展功能并修改图例标签。这种方法使您能够更好地控制图表并轻松地自定义图例标签。下面是我如何尝试的一个例子:
const options = {
responsive: true,
legend: {
onClick: () => false,
},
plugins: {
legend: {
display: true,
labels: {
generateLabels: function (chart) {
// Custom legend callback to modify the labels
const originalLabels = Chart.defaults.plugins.legend.labels.generateLabels(chart);
originalLabels.forEach((label) => {
label.text = "Custom " + label.text; // Add a prefix to each label
label.padding = 10; // Adjust the padding for each label
label.font.size = 14; // Adjust the font size for each label
});
return originalLabels;
},
},
},
},
OR This
plugins: {
legend: {
labels: {
// Additional legend label options can be set here
// For example:
padding: 10, // Adjust the padding between legend items
font: {
size: 14, // Adjust the font size of legend labels
},
},
},
},
字符串
有人能帮我解决这个问题吗?
1条答案
按热度按时间yxyvkwin1#
Chart.js没有提供任何直接的属性来定制你所说的边距。唯一可以更改的是填充,但是,只有顶部填充会影响图例。
根据他们的文档,设置此边距的一个好方法是使用自定义HTML图例:HTML Legend
此方法允许您在包含图例的html元素中给予任何样式输入。