(Chart.js 3.7.0) 改变 x 轴刻度的位置以在每个刻度之间交替？答案

【问题标题】：(Chart.js 3.7.0) change position of x-axis ticks to alternate between each tick?(Chart.js 3.7.0) 改变 x 轴刻度的位置以在每个刻度之间交替？
【发布时间】：2022-01-20 13:00:54
【问题描述】：

我有一个图表可以有效地呈现时间线，但有时刻度位置太靠近了

Current graph (padding: 25)

我可以将填充更改为负值，将它们置于 x 轴上方：

Ticks above x-axis (padding: -60)

但我希望它们交替上下，例如下面的第 1 个刻度，上面的第 2 个刻度，下面的第 3 个刻度等。

我可以访问单个刻度填充来执行此操作吗？请参阅下面我当前的代码：

ticks: {
  source: 'data',
  maxRotation: 90,
  minRotation: 90,
  font: {
    size: 12,
  },
  autoskip: true,
  padding: -60,
},

TIA 寻求帮助！ :-)

【问题讨论】：

标签： callback chart.js padding xticks

【解决方案1】：

您可以定义两个相同的datasets 以及两个 x 轴。 x 轴之一带有position: 'top'，另一个带有默认位置（“底部”）。

两个 x 轴上的 ticks.callback 函数略有不同，可确保仅显示每隔一个刻度。

ticks: {
  source: 'data',
  ...
  callback: (v, i) => i % 2 ? v : ''
},

请看下面的可运行代码，看看它是如何工作的。

const data = [
  { x: "2022-03-22", y: 0 },
  { x: "2022-04-01", y: 0 },
  { x: "2022-04-02", y: 0 },
  { x: "2022-04-03", y: 0 },
  { x: "2022-04-08", y: 0 },
  { x: "2022-04-12", y: 0 },
  { x: "2022-04-15", y: 0 }
];

new Chart('chart', {
  type: 'line',
  data: {
    datasets: [{
      data: data,
      backgroundColor: 'black',
      pointRadius: 5,
      pointHoverRadius: 5,
      borderWidth: 2,
      xAxisID: 'x'
    },
    {
      data: data,
      backgroundColor: 'black',
      pointRadius: 5,
      pointHoverRadius: 5,
      borderWidth: 2,
      xAxisID: 'x2'
    }]
  },
  options: {
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        callbacks: {
          label: context => undefined
        }
      }
    },    
    scales: {
      y: {
        ticks: {
          display: false,
        },        
        grid: {
          display: false,
          drawBorder: false
        }
      },
      x: {
        position: 'top',
        type: 'time',
        time: {
          unit: 'day',
          tooltipFormat: 'MMM DD'
        },
        ticks: {
          source: 'data',
          minRotation: 90,
          callback: (v, i) => i % 2 ? v : ''
        },        
        grid: {
          display:false,
          drawBorder: false
        }
      },
      x2: {
        type: 'time',
        time: {
          unit: 'day',
          tooltipFormat: 'MMM DD'
        },
        ticks: {
          source: 'data',
          minRotation: 90,
          callback: (v, i) => i % 2 ? '' : v
        },        
        grid: {
          display:false,
          drawBorder: false
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
<canvas id="chart" height="50"></canvas>

【讨论】：