当 usePointStyle 为 true 时，更改 Chart.js 中图例点的半径/点大小

Question

我想减小图例项目的磅值

这是一个工作小提琴

我尝试了文档中给出的所有可用选项，但没有任何效果

JavaScript 代码

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
        {
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
        },  
            {
                label: '# of Points',
                data: [7, 11, 5, 8, 3, 7],
                borderWidth: 1
            }
        ]
  },
  options: {
    legend: {
        labels: {
            usePointStyle:true
      }
    },
    scales: {
        yAxes: [{
        ticks: {
                    reverse: false
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

网页

<canvas id="chartJSContainer" width="600" height="400"></canvas>

Answer 1

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

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

查看chartjs代码（2.8版本），boxWidth只要小于fontSize. fontSize当它变得大于 时使用boxWidth。

Answer 2

如果您阅读有关 legend 的 Chartjs 文档：

使用点样式

标签样式将匹配相应的点样式（大小基于 fontSize，本例中不使用 boxWidth）。

所以只需添加：

...
labels: {
  fontSize: 2,
    usePointStyle:true,
}
...

修改大小的 JSFiddle

您可以缩小图例点的大小。

也许我理解错了，如果是的话请发表评论，我会修改我的答案以适应新问题