如何在chart js react应用程序中修复此设计问题

mo49yndu  于 2023-08-05  发布在  Chart.js
关注(0)|答案(1)|浏览(166)


如何设置图例标签和折线图顶点之间的边距底部
您可以利用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
        },
      },
    },
  },

字符串
有人能帮我解决这个问题吗?

yxyvkwin

yxyvkwin1#

Chart.js没有提供任何直接的属性来定制你所说的边距。唯一可以更改的是填充,但是,只有顶部填充会影响图例。
根据他们的文档,设置此边距的一个好方法是使用自定义HTML图例:HTML Legend
此方法允许您在包含图例的html元素中给予任何样式输入。

相关问题