javascript - ChartJs 气泡图 - 悬停气泡变得太大

Question

我使用 ChartJs 创建了一个气泡图，并使用 Json 动态填充数据。

请参阅下面的代码。

for (var i = 0; i < response.data.length; i++) {
        var point_data = [];
        point_data.push({
            x: response.data[i]['return_tickets'].toString(),
            y: Math.round(response.data[i]['return_percentage']).toString(),
            r: Math.round((response.data[i]['return_percentage'])).toString()
        });
        data.push({ label: response.data[i]['staff_name'], data: point_data, backgroundColor: getRandomColor(), hoverRadius:4 });
    }

    new Chart(document.getElementById("bubbleChart"), {
        type: 'bubble',
        data: {
            datasets: data
        },
        options: {
            title: {
                display: true,
                text: ''
            }, scales: {
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: "Return Tickets %"
                    }
                }],
                xAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: "Return Tickets"
                    }
                }]
            }
        }
    });

它生成如下所需的图表

问题是当我将鼠标悬停在任何气泡上时，气泡的大小呈指数增长。

如何保持大小不变​​？

我正在设置数据集的 hoverRadius 属性，但它对我没有任何作用。

Answer 1

问题出在你的这行代码上:

{ 标签:response.data[i]['staff_name']，数据:point_data，backgroundColor:getRandomColor()，hoverRadius:4 }

这不是有效的 JSON。值必须是字符串或数组。最有可能的问题是在 label: response.data[i]['staff_name'] 或 point_data 中(我可以看到你正在制作 x , y 和 r 值 .toString() 可能不需要)。再检查一遍。创建一个有效的 JSON，然后尝试设置 hoverRadius: 0，它将起作用。

设置 hoverRadius: 0 对我来说工作正常。如果您设置 hoverRadius: 0，则鼠标悬停时气泡大小不会改变。

下面是工作示例:

var chart = new Chart(ctx, {
  type: 'bubble',
  data: {
    datasets: [{
      label: 'Bubble',
      data: [{
        x: 5,
        y: 55,
        r: 27.5
      }],
      backgroundColor: 'rgba(0, 119, 290, 0.6)',
      hoverRadius: 0
    }]
  },
  options: {
    tooltips: {
      callbacks: {
        label: function(t, d) {
          return d.datasets[t.datasetIndex].label +
            ': (Day:' + t.xLabel + ', Total:' + t.yLabel + ')';
        }
      }
    }
  }
});

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

查看官方文档以获取更多信息:https://www.chartjs.org/docs/latest/charts/bubble.html#dataset-properties