How do I invert an y-axis using chart.js (v2.0-dev)

问题

I am creating line charts with 2 y-axes. one of those axes has two datasets but both run from the range of 0-100. The higher number being the better one. The second y-axis is usually lower in range (often in the single digits) and the best result is 1.

How can I invert the second y-axis so that 1 is at the top of the chart?

(I will try to find a solution myself, but at 5k+ lines in chart.js, it might take a while )

Thanks ^_^

回答1:

Dev 2.0 of chart js supports an option to reverse the ticks when setting up the axis so your declaration of the second axis would become

{
    type: "invertedLinear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
    display: true,
    position: "right",
    id: "y-axis-2",
    ticks: {
        reverse: true
    },
    // grid line settings
    gridLines: {
        drawOnChartArea: false, // only want the grid lines for one axis to show up
    }
}

Here it is in action https://jsfiddle.net/nwc8ys34/15/

回答2:

Using v 2.7.0, and the following seems to work:

options: {
  scales: {
    yAxes: [{
      ticks: {
        reverse: true,
      }
    }]
  }
}

来源：https://stackoverflow.com/questions/33608040/how-do-i-invert-an-y-axis-using-chart-js-v2-0-dev