javascript - 在不改变 r 值的情况下改变气泡半径的大小

Question

我正在将数据点添加到气泡图中。但是，由于 r 的值非常小，我几乎看不到图表上的点。我尝试使用 radius 属性来扩大半径，但它似乎被 r 数据属性覆盖。如何增加每个气泡的半径？例如，如何将它们设置为实际 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 属性相同但仍增加半径？

Answer 1

这可以通过 Plugin Core API 来完成。 . API 提供了不同的钩子(Hook)，可用于执行自定义代码。在您的情况下，您可以使用 afterDatasetUpdate钩子(Hook)来增加数据集中点的半径 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>