Question

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

在文档it says中，

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

因此，在我的示例中，点样式的大小必须为min(5, 12) = 5，因此增大boxWidth必须增大其大小（直到boxWidth大于{ {1}}）。但是事实并非如此。更改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)
}

Answer 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'
    }
  ]

ChartJS-点的大小不变

1 个答案: