Chart.js的y轴步长为20到1（而不是1到20）

Question

我正在使用chart.js尝试在此处重新创建此图表：https://www.transfermarkt.us/fc-liverpool/platzierungen/verein/31

我遇到的问题是将y轴从20步进到1。可以吗？

  barChartOptions: ChartOptions = {
   responsive: true,
   maintainAspectRatio: false,
    scales: {
     yAxes: [{
      ticks: {
       reverse: true,
       min: 1,
       max: 20
      }
    }]

  }
};

不幸的是，reverse：true属性不能解决此问题，因为它也会翻转整个数据。

Answer 1

请确保不要在第一个yAxis上显示刻度线，并添加第二个yAxis以相反的顺序显示生成的刻度线。

{
  ticks: {
    reverse: true,
    autoSkip: false,
    max: 1,
    min: 20
  },
  afterBuildTicks: (axis, ticks) => Array(20).fill().map((v,i) => i + 1).reverse()
}

此外，您必须定义tooltips.callback.label函数以在工具提示中显示正确的值。

请查看下面的可运行代码段。

tooltips.callback.label

const labels = ['A', 'B', 'C', 'D'];
const data = [12, 1, 8, 17];
const yTop = 1;
const yBottom = 20;

new Chart('myChart', {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      label: "My Dataset",
      data: data.map(v => yBottom + 1 - v),
      borderWidth: 3
    }]
  },
  options: {
    legend: {
      display: false
    },
    tooltips: {
      callbacks: {
        label: tooltipItem => data[tooltipItem.index]
      }
    },
    scales: {
      yAxes: [{
          ticks: {
            display: false,
            min: yTop,
            max: yBottom
          },
          gridLines: {
            drawTicks: false
          }
        },
        {
          ticks: {
            reverse: true,
            autoSkip: false,
            max: yTop,
            min: yBottom
          },
          afterBuildTicks: (axis, ticks) => Array(yBottom).fill().map((v, i) => i + 1).reverse()
        }
      ],
      xAxes: [{
        gridLines: {
          display: false
        }
      }]
    }
  }
});