Chart.js

Question

我正在用 Chart.js 绘制气泡图。有时大气泡恰好位于图的边缘附近并被截断。因此，我试图将轴限制扩展到数据范围之外。思路是这样的

min_x_axis = min_x_data - (max_x_data - min_x_data) * 0.1
max_x_axis = max_x_data + (max_x_data - min_x_data) * 0.1

我对 y 轴做同样的事情。一般来说，它可以工作，但通过在每个方向上将轴延伸 10%，情节看起来很难看。比如x轴的ticks之前是1,2,3。在我延长轴之后，刻度线是这样的 0.87, 1, 2, 3, 3.12 ，由于网格线间距不均匀，这使得情节看起来有点难看。有什么办法可以在每个方向上将轴的刻度延长 1 步，在这种情况下，刻度将为 0,1,2,3,4.

此图的数据范围会根据用户输入发生显着变化，因此无法事先知道刻度步长。

Answer 1

您可以像这样使用 grace 选项：

var options = {
  type: 'bubble',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [{
        x: 0,
        y: 3,
        r: 4
      }, {
        x: -3,
        y: 1,
        r: 38
      }, {
        x: 16,
        y: -4,
        r: 18
      }],
      backgroundColor: 'pink'
    }]
  },
  options: {
    scales: {
      x: {
        grace: 1
      },
      y: {
        grace: 1
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
</body>

优雅文档：https://www.chartjs.org/docs/master/axes/cartesian/linear.html#grace

Chart.js - 向轴添加 1 个刻度步骤

Chart.js - add 1 more tick step to an axis

react-chartjs

chartjs-2.6.0