Chart.js 中的气泡被切断

Question

我遇到一个问题，图表中的最后一个气泡被切断。我需要一种扩展图表的方法，以便显示整个圆。我已经尝试了一切，从添加额外的值到最后，到调整填充。似乎什么都不起作用。不幸的是，关于气泡图的 Chart JS 文档也严重缺乏。

var randomScalingFactor = function() {
  return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};
var randomColorFactor = function() {
  return Math.round(Math.random() * 255);
};
var randomColor = function() {
  return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
};

var bubbleChartData = {
  animation: {
    duration: 10000
  },
  datasets: [{
    label: "My First dataset",
    backgroundColor: randomColor(),
    data: [
      {
        x: 10,
        y: 0,
        r: Math.abs(randomScalingFactor()) / 5,
      }, {
        x: 20,
        y: 0,
        r: Math.abs(randomScalingFactor()) / 5,
      }, {
        x: 30,
        y: 0,
        r: Math.abs(randomScalingFactor()) / 5,
      }, {
        x: 40,
        y: 0,
        r: Math.abs(randomScalingFactor()) / 5,
      }, {
        x: 50,
        y: 0,
        r: Math.abs(randomScalingFactor()) / 5,
      }, {
        x: 60,
        y: 0,
        r: Math.abs(randomScalingFactor()) / 5,
      }, {
        x: 70,
        y: 0,
        r: 30,
      }]
  }]
};

var ctx = document.getElementById('Chart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bubble',
  data: bubbleChartData
})

JSFiddle： https: //jsfiddle.net/3dog0bec/

Answer 1

我通过修改 xAxes 刻度的最小值和最大值解决了这个问题。这是有效的，因为我有一定​​数量的数据要显示，所以我只需将值设置为比第一个数据点少 10，比最后一个数据点多 10。

var chart = new Chart(ctx, {
        type: 'bubble',
        data: bubbleChartData,
        options: {
            scales: {
                xAxes: [
                {
                    ticks: {
                        min: -10,
                        max: 100
                    }
                }]
            }
        }
    });