Chart.js -样式图例:小圆圈

6qqygrtg  于 2023-06-22  发布在  Chart.js
关注(0)|答案(2)|浏览(183)

我用chart.js创建了一个折线图。我使用以下命令将图例符号形式从矩形更改为圆形:

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

我想改变圆圈的大小。但根据文档,只有当我也改变字体大小时才能做到这一点:
标签样式将匹配相应的点样式(大小基于fontSize,在这种情况下不使用boxWidth)。-https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration
有谁知道是否有其他选择来改变尺寸?或者我必须使用 generateLabels()
这里有一个codePen来看看。

z4iuyo4d

z4iuyo4d1#

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

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

阅读关于图例的图表文档

p1iqtdky

p1iqtdky2#

图表4.3.0:
单位:options.plugins.legend.labels

  • boxHeight单独适用于我,并设置图像大小(默认为圆形)
  • boxWidth设置与以下标注文本的距离

chartjs图例文档

相关问题