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

我想减少图例项目的点大小

这是一张工作票

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

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);

Html

如果您阅读：

usePointStyle

标签样式将匹配相应的点样式（大小基于fontSize，在这种情况下不使用boxWidth）

因此，只需添加：

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

图例点的大小会变小

---

也许我理解错了，如果是这样，请留下评论，我将修改我的答案以适应新问题

您可以使用

boxWidth

选项影响图例中点的大小：

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

---

查看chartjs代码（版本2.8），只要小于

fontSize

，就可以使用

boxWidth

fontSize

用于大于

boxWidth

希望这对您有所帮助@Umair我已经看到了，但是单击功能在自定义legendsWhat关于只更改点大小而不更改字体大小？好吧，这在代码中是不可能的，因为在代码（）中，您将fontSize传递给calc点的大小以及标签文本这是一个非常令人羞愧的问题。。。我不知道是什么促使chartjs没有为该尺寸提供额外的参数

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