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

问题描述

我正在用 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 轴之前的刻度是 1,2,3。在我延长轴后，刻度是这样的 0.87,1,3,3.12 ，由于网格线间隔不均匀，这使得情节看起来有点难看。有什么办法可以在每个方向上将轴 1 步的刻度延长，在这种情况下，刻度将是 0,4。

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

解决方法

您可以像这样使用 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

chartjs-2.6.0 react-chartjs

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

问题描述

解决方法

相关问答