如何使用chart.js(v2.0-dev)反转y轴

时间:2015-11-09 11:22:14

标签: chart.js

我正在创建包含2个y轴的折线图。其中一个轴有两个数据集,但都在0-100范围内运行。数字越高越好。第二个y轴的范围通常较低(通常为单个数字),最佳结果为1.

如何反转第二个y轴,使1位于图表的顶部?

(我会尝试自己找一个解决方案,但在chart.js的5k +行,可能需要一段时间)

谢谢^ _ ^

2 个答案:

答案 0 :(得分:10)

图表js的Dev 2.0支持在设置轴时反转刻度的选项,因此第二轴的声明将变为

{
    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
    }
}

此处处于行动中https://jsfiddle.net/nwc8ys34/15/

答案 1 :(得分:9)

使用v 2.7.0,以下似乎可行:

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