更改气泡半径的大小而不更改r值

如何解决更改气泡半径的大小而不更改r值

我正在将数据点添加到气泡图。但是，由于r的值很小，我几乎看不到图形上的点。我尝试使用radius属性扩展半径，但是似乎被r data属性覆盖。如何增加每个气泡的半径？例如，如何将它们设置为实际r值的10倍？

这是我到目前为止的代码：

    this.managers.forEach(manager => {
        const newDataPoint = {
            label: [manager.SecurityName],backgroundColor: this.getRandomRGB(),borderColor: this.getRandomRGB(),data: [{
                x: +manager[this.selectedX],y: +manager[this.selectedY],r: +manager[this.selectedR]
            }],radius: (+manager[this.selectedR] * 10)
        };
        this.chartDataSet.push(newDataPoint);
    });

我设法通过直接乘以r属性来更改大小，但是这改变了悬停时显示的实际值，我想避免这种情况。如何保持r属性不变但仍增加半径？

解决方法

这可以通过Plugin Core API完成。 API提供了可用于执行自定义代码的不同挂钩。在您的情况下，您可以使用afterDatasetUpdate钩子来增加数据集metadata中的点的半径。

plugins:[{
  afterDatasetUpdate: chart => {
    chart.getDatasetMeta(0).data.forEach(v => {
      v._model.radius *= 10;
      v._options.hoverRadius = v._model.radius;
    })
  }
}],

new Chart('canvas',{
  type: 'bubble',plugins: [{
    afterDatasetUpdate: chart => {
      chart.getDatasetMeta(0).data.forEach(v => {
        v._model.radius *= 10;
        v._options.hoverRadius = v._model.radius;
      })
    }
  }],data: {
    datasets: [{
      label: 'First Dataset',data: [
        {x: 10,y: 20,r: 1 },{x: 20,y: 10,r: 2 }
      ],backgroundColor: 'rgb(255,99,132)'
    }]
  },options: {
    scales: {
      xAxes: [{
        ticks: {
          min: 5,max: 25
        }
      }],yAxes: [{
        ticks: {
          min: 5,max: 25
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="90"></canvas>