如何使用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 )
谢谢^ _ ^
推荐答案
图表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屋!