Chart.js - 样式图例：缩小圆圈

Question

我使用chart.js创建了一张折线图。我通过以下方式将图例符号从矩形改为圆形：

legend: {
  display: true,
  labels: {
    usePointStyle: true,
  },
}

我想改变圆的大小。但是根据文档，只有在同时更改字体大小时才能实现：

标签样式将与相应的点样式匹配（大小基于fontSize，此时不使用boxWidth）。 - https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration

有人知道是否有其他选项可以更改大小吗？还是必须使用generateLabels()。

这里有一个codePen供您查看。

- DarkMikey

Answer 1

您可以使用boxWidth选项来影响图例中点的大小：

options: {
  legend: {
    labels: {
      usePointStyle: true,
      boxWidth: 6
    }
  }
}

阅读关于图表js图例的文档

- Akhil Pilli

Answer 2

Chartjs 4.3.0：

在 options.plugins.legend.labels 中：

- boxHeight 单独适用于我，并设置图像大小（默认为圆形） - boxWidth 设置与下一个标签文本的距离 chartjs 图例文档

- LingLing

---

你的回答可以通过提供更多支持性信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人能够确认你的回答是否正确。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community