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

问题在于你的这行代码：

{ label: response.data[i]['staff_name'], data: 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，鼠标悬停时气泡大小不会改变。

以下是工作示例：

＆＃13;

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 + ')';
        }
      }
    }
  }
});

＆＃13;

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

＆＃13;

结帐官方文档了解详情：https://www.chartjs.org/docs/latest/charts/bubble.html#dataset-properties

Answer 2

我已经遇到过同样的问题，还通过对每个x，y和z进行类型转换来解决此问题。我只是将其转换为浮点数


 'x' => (float) $x_axis_value,
 'y' => (float) $y_axis_value,
 'r' => (float) $radious_value,

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

2 个答案: