在Chart.js中使用ticks'major'会与未知文本重叠

问题描述 投票:0回答:1

用Chart.js使用下面的ticks配置,只有当xAxes结果小于7时,才会与未知文本重叠。

major: {
    enabled: true
}

这是我的代码。

options: {
    scales: {
      xAxes: [
        {
          type: 'time',
          distribution: 'series',
          display: true,

          ticks: {
            beginAtZero: false,
            autoSkip: true,
            maxTicksLimit: 10,
            maxRotation: 0,
            responsive: true,
            legend: {
              display: false,
            },
            major: {
              enabled: true
            }
          }
        }
      ]
    }
  }

问题在下面enter image description here

chart.js
1个回答
0
投票

如果没有看到更多的代码,很难猜测你的问题的原因。在下面的可运行代码片段中,我使用了和你一样的选项,而且工作得很好。

请确保使用最新的Chart.js稳定版(目前是 v2.9.3),并检查这是否解决了你的问题。

new Chart('chart', {
  type: 'line',
  data: {
    datasets: [{
      label: 'things',
      borderColor: 'blue',
      backgroundColor: 'lightblue',
      data: [
        { t: new Date("05/01/2020"), y: 2 },
        { t: new Date("05/02/2020"), y: 0 },
        { t: new Date("05/03/2020"), y: 1 },
        { t: new Date("05/04/2020"), y: 7 },
        { t: new Date("05/05/2020"), y: 6 },
        { t: new Date("05/06/2020"), y: 4 }
      ]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        distribution: 'series',
        ticks: {
          beginAtZero: false,
          autoSkip: true,
          maxTicksLimit: 10,
          maxRotation: 0,
          responsive: true,
          legend: {
            display: false,
          },
          major: {
            enabled: true
          }
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="chart" height="90"></canvas>
© www.soinside.com 2019 - 2024. All rights reserved.