限制 chart.js X 轴刻度

Question

我试图限制在 ChartJS 配置上显示的 X 刻度数量，但它一直忽略设置。

const data = {
   labels: ['', '', ''],   
   datasets: [{
      label: '偽のラスパイ MQTT',
      data: ['', '', ''],
      fill: false,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
   }]
};
const config = {
   type: 'line',
   data,
   options: {
      scales: {
         xAxis: {
            ticks: {
               maxTicksLimit: 1
            }
         }
      }
   }
};
const myChart = new Chart(document.getElementById('myChart'), config);

虽然我查看了其他帖子，maxTicksLimit

的属性名称和属性深度似乎有些细微差别

也许属性名称不正确？

Answer 1

这是因为您在使用 V3 语法的同时使用了 chart.js 的 V2。对于 V2，所有 x 轴刻度都在一个名为 xAxes 的数组中，而不是它们自己的对象。

如需完整文档，您可以在此处查看

实例：

const data = {
  labels: ['', '', '', '', '', ''],
  datasets: [{
    label: '偽のラスパイ MQTT',
    data: ['', '', '', '', '', ''],
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }]
};
const config = {
  type: 'line',
  data,
  options: {
    scales: {
      xAxes: [{
        ticks: {
          maxTicksLimit: 1
        }
      }]
    }
  }
};
const myChart = new Chart(
  document.getElementById('chartJSContainer'), config);

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

限制 chart.js X 轴刻度

Limit chart.js X axis ticks

javascript

chart.js