如何在ChartJS中更改点大小

kxeu7u2r  于 2023-04-06  发布在  Chart.js
关注(0)|答案(3)|浏览(151)

我想更改图表中点的大小。

这个点应该尽可能小。我们试图使用

pointHoverRadius: 1

但它不起作用。
先谢谢你,

qrjkbowd

qrjkbowd1#

您还必须将**pointRadius属性设置为1(因此点最初会变小),沿着pointHoverRadius**(悬停时保持小)*

pointRadius: 1,
pointHoverRadius: 1
ffx8fchx

ffx8fchx2#

它确实需要进入数据集,如下所示:

{
    type: 'scatter',
    data: {
        labels: ['2015', '2016', '2017', '2018', '2019', '2020'],
        datasets: [
            {
                label: 'Cars',
                data: [{x:-10,y:0}, {x:0,y:10}, {x:10,y:5}, {x:4,y:8}],
                pointRadius: 10,
                ....
            },
            {
                label: 'Bikes',
                data: [{x:10,y:3}, {x:-2,y:6}, {x:9,y:3}, {x:11,y:6}],
                pointRadius: 10,
                ...
            }
        ]
    },
    options: {
       ...
    }

}
u5i3ibmn

u5i3ibmn3#

在ChartJS文档中,它指示我们编辑options.elements.point对象以自定义点的外观。
此问题可能涉及两个字段:

  • radius点一般应该有多大(你可能想要这个)
  • hoverRadius当用户悬停在点上时,点应该有多大

所以options对象的最后一个例子是(跳过不相关的属性):

const options = {
  elements: {
    point: {
      radius: 1,
      hoverRadius: 2, // ex.: to make it bigger when user hovers put larger number than radius.
    }
  }
}

相关问题