ChartJS - 点的大小不会改变答案

【问题标题】：ChartJS - Size of the point doesn't changeChartJS - 点的大小不会改变
【发布时间】：2020-02-02 23:49:22
【问题描述】：

我创建了这个图表，并将usePointStyle: true 设置为使用圆形而不是矩形作为legend 的标签。但我似乎无法更改这些圆圈的大小（或半径）。

在it says的文档中，

标签样式将匹配相应的点样式（大小取决于最小 boxWidth 和 fontSize 之间的值）。

所以在我的例子中，点样式的大小必须是min(5, 12) = 5，因此增加boxWidth必须增加它的大小（直到boxWidth大于fontSize）。但事实并非如此。更改 boxWidth 没有任何影响。

我该如何解决这个问题？另外，是否可以用它们的颜色填充这些圆圈？

let chLine = document.getElementById("chLine");

let chartData = {
  labels: ['l1', 'l2', 'l3', 'l4', 'l5', 'l6', 'l7', 'l8', 'l9'],
  datasets: [{
      label: 'c1',
      data: [0.3, 0.4, 0.5, 0.35, 0.2, 0.5, 0.4, 0.55, 0.6],
      backgroundColor: 'transparent',
      borderColor: '#e6194b',
      borderWidth: 1,
      pointBackgroundColor: '#e6194b'
    },
    {
      label: 'c2',
      data: [0.7, 0.5, 0.2, 0.4, 0.6, 0.1, 0.88, 0.35, 0.45],
      backgroundColor: 'transparent',
      borderColor: '#3cb44b',
      borderWidth: 1,
      pointBackgroundColor: '#3cb44b'
    }
  ]
}

if (chLine) {
  new Chart(chLine, {
    type: 'line',
    data: chartData,
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: false
          }
        }]
      },
      legend: {
        position: 'top',
        labels: {
          fontSize: 12,
          boxWidth: 5,
          usePointStyle: true
        }
      },
      events: ['click', 'mousemove'],
      onClick: clicked
    }
  });
}

function clicked(c, i) {
  console.log(c, i)
}

<!DOCTYPE html>
<html>

<head>
  <title>test</title>
  <meta charset="UTF-8">
</head>

<body>
  <div class="container">
    <div class="row my-3">
      <div class="col">
        <h4>Chart</h4>
      </div>
    </div>
    <div class="row my-2">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <canvas id="chLine" height="100"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
  <script src="test.js"></script>
</body>

</html>

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

要增加点的大小，您必须增加图例的fontSize 值。当您增加字体大小时，标签和点的大小都会增加。

当您增加boxWidth 时，图例图标的整体宽度将会增加。在“框”图例图标的情况下，矩形的宽度将增加。但万一，它会做的只是在图例图标和它的文本之间提供一些额外的空间。

要使图例点圆圈填充其颜色，您必须将backgroundColor 属性设置为该颜色并将fill 设置为false。

  datasets: [{
      label: 'c1',
      data: [0.3, 0.4, 0.5, 0.35, 0.2, 0.5, 0.4, 0.55, 0.6],
      backgroundColor: '#e6194b',
      borderColor: '#e6194b',
      borderWidth: 1,
      fill: false,
      pointBackgroundColor: '#e6194b'
    },
    {
      label: 'c2',
      data: [0.7, 0.5, 0.2, 0.4, 0.6, 0.1, 0.88, 0.35, 0.45],
      backgroundColor: '#3cb44b',
      borderColor: '#3cb44b',
      borderWidth: 1,
      fill: false,
      pointBackgroundColor: '#3cb44b'
    }
  ]

【讨论】：