如何使用 chart.js (v2.0-dev) 反转 y 轴 [英] How do I invert an y-axis using chart.js (v2.0-dev)

问题描述

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

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.

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

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

(我会尝试自己找到解决方案，但在chart.js 中超过 5k+ 行，可能需要一段时间)

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

谢谢^_^

推荐答案

chart js 的 Dev 2.0 支持在设置轴时反转刻度的选项，因此您对第二个轴的声明将变为

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

它在行动 https://jsfiddle.net/nwc8ys34/15/

这篇关于如何使用 chart.js (v2.0-dev) 反转 y 轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！