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

Posted 2023-03-06

【中文标题】Chart.js - 样式图例：小圆圈

【英文标题】：Chart.js - style legend: smaller circles

【发布时间】：2019-07-18 19:30:59

【问题描述】：

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

legend: 
  display: true,
  labels: 
    usePointStyle: true,
  ,

我想改变圆圈的大小。但根据文档，这只有在我也更改字体大小时才有可能：

标签样式会匹配对应的点样式（大小以fontSize为准，本例不使用boxWidth）。 - https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration

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

这里有一个codePen 来看看。

【参考方案1】：

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

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

阅读documentation of chartjs about legend