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

weylhg0b 于 2022-11-23 发布在 Chart.js

关注(0)|答案(2)|浏览(147)

我正在向气泡图中添加数据点。但是，由于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属性不变，但仍然增加半径呢？

chart.js

来源：https://stackoverflow.com/questions/63623783/change-size-of-bubble-radius-without-changing-r-value

2条答案

按热度按时间

2o7dmzc51#

这可以通过插件核心API来实现。该API提供了不同的钩子，可用于执行自定义代码。在您的情况下，您可以使用afterDatasetUpdate钩子来增加数据集元数据中的点的半径。

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

第一次

赞(0）回复(0）举报 2022-11-23

axkjgtzd2#

对于使用3.9.1版本的开发人员，它是这样的：
第一个

赞(0）回复(0）举报 2022-11-23