Chart.js中xAxes轴数值缺失问题求助

以下是不同图表库的调整方案：

• Chart.js

  • v2版本配置：

    options: {
      scales: {
        xAxes: [{
          position: 'bottom', // 强制x轴位于底部
          offset: true, // 让标签与图表区域保持间隔
          ticks: {
            padding: 10 // 增大标签与x轴的间距
          }
        }]
      }
    }
    

  • v3及以上版本配置：

    options: {
      scales: {
        x: {
          position: 'bottom',
          offset: true,
          ticks: {
            padding: 10
          }
        }
      }
    }
    

• ECharts

  xAxis: {
    position: 'bottom',
    axisLabel: {
      padding: 5 // 调整标签与轴线的距离，避免贴在图表内部
    }
  }
  

• 额外检查：如果有自定义CSS修改了标签位置，需移除或修正这类样式，比如：

  /* 避免此类导致标签偏移的代码 */
  .chart-x-ticks {
    position: relative;
    top: -15px;
  }
  

内容的提问来源于stack exchange，提问作者Akaash