javascript - 如何使用 Chartjs 匹配左右刻度间隔

Question

当我在 Chartjs 中使用左右线图时，我有时会得到不一致的 Y 轴刻度间隔计数。所以，我可能在左边有 7 个间隔，而 Chartjs 可能会自动在右边放 10 个间隔。难以阅读的图表示例如下所示:

因此，问题是——如何设置右侧的 Y 轴刻度间隔，使其与左侧保持一致？

Answer 1

定义 options.scales.yAxes[1](右 Y 轴)时，添加一个 beforeUpdate 回调，以便您可以调整其 stepSize，像这样:

beforeUpdate: function(scale) {
  // get the max data point on the right
  var nMax = Math.max.apply(Math,scale.chart.config.data.datasets[1].data);
  // Get the count of ticks on the left that Chartjs automatically created.
  // (Change the 'Clicks' to the 'id' property of that left Y Axis.)
  var nLeftTickCount = scale.chart.scales['Clicks'].ticks.length;
  // Add some exception logic so that we don't go less than 7 (a failsafe).
  // Also, we need the count of spaces between the ticks, 
  // not the count of total ticks.
  nLeftTickCount = (nLeftTickCount < 7) ? 7 : nLeftTickCount - 1;
  // compute our tick step size
  var nStepSize = nMax / nLeftTickCount;
  // Assign the right Y Axis step size.
  scale.chart.options.scales.yAxes[1].ticks.stepSize = nStepSize;
  return;
}

这将创建一个一致的图表，如下所示:

这是带有左右 Y 轴的面积图的完整示例:

<script src="vendor/chartjs/chart.js/dist/Chart.min.js"></script>

<div class="chart-container">
  <canvas id="my-canvas" width="400" height="200" style="width:100%;"></canvas>
</div>

<script>

var tsCanvas = document.getElementById('my-canvas');

var tsChart = new Chart(tsCanvas, {
  type: 'line',
  data: {
    labels: ["Feb 1","Feb 16","Mar 1","Mar 16","Mar 22"],
    datasets: [
      {
        label: 'Clicks',
        yAxisID: 'Clicks',
        data: [10706, 12847, 11516, 10464, 1204],
        backgroundColor: 'rgba(26, 187, 156, 0.2)',
        borderColor: 'rgba(26, 187, 156, 1)',
        pointBackgroundColor: 'rgba(26, 187, 156, 1)',
        borderWidth: 0.5,
        pointRadius:2,
        tension:0
      },
      {
        label: 'Revenue',
        yAxisID: 'Revenue',
        data: [106.66, 342.86, 313.67, 461.18, 25.84],
        backgroundColor: 'rgba(90, 144, 197, 0.2)',
        borderColor: 'rgba(90, 144, 197, 1)',
        pointBackgroundColor: 'rgba(90, 144, 197, 1)',
        borderWidth: 0.5,
        pointRadius:2,
        tension:0
      }
    ]
  },
  options: {
    maintainAspectRatio:false,
    hover: {
      animationDuration:0
    },
    tooltips: {
      mode: 'index',
      multiKeyBackground: 'rgba(255,255,255,0.55)'
    },
    scales: {
      yAxes: [
      {
        id: 'Clicks',
        type: 'linear',
        position: 'left',
        scaleLabel: {
          display:true,
          labelString: 'Clicks'
        },
        ticks: {
          beginAtZero:true
        }
      },
      {
        beforeUpdate: function(scale) {
          var nMaxRev = Math.max.apply(Math,scale.chart.config.data.datasets[1].data);
          var nLeftTickCount = scale.chart.scales['Clicks'].ticks.length;
          nLeftTickCount = (nLeftTickCount < 7) ? 7 : nLeftTickCount - 1;
          var nTickInterval = nMaxRev / nLeftTickCount;
          scale.chart.options.scales.yAxes[1].ticks.stepSize = nTickInterval;
          return;
        },
        id: 'Revenue',
        type: 'linear',
        position: 'right',
        scaleLabel: {
          display:true,
          labelString: 'Revenue'
        },
        ticks: {
          beginAtZero:true
        }
      }
      ],
      xAxes: [
        {
          type: 'category',
          ticks: {
            minRotation:50,
            maxRotation:50
          }
        }
      ]
    }
  }
});

</script>