javascript - Chart.JS 如何更改 y 轴的顺序

标签 javascript html charts chart.js

我图表上的 y 轴从 1 到 20(最小值到最大值),但我希望 y 轴从 20 到 1(最大值到最小值)从图表底部开始的最大数字和随着图表的上升而减少,直到达到最小值。我似乎找不到执行此操作的语法。我正在使用 chart.js 来执行此操作

<script>
var myChart = document.getElementById("myChart").getContext("2d");

var historyChart = new Chart(myChart, {
    type:'line',
    data:{
        labels:['2012/13', '2013/14', '2014/15', '2015/16', '2016/17'],
        datasets:[{
            label: 'League Position',
            fill: false,
            lineTension: 0.1,
            backgroundColor: "blue",
            borderColor: "black",
            borderCapStyle: 'butt',
            data: [15, 11, 17, 13, 4]
        }]
    },
    options:{
    title: {
        display: true,
        text: 'League History'
    },
     scales: {
            yAxes : [{
                ticks : {       
                     fontSize: 14,            
                    max : 20,  
                    min : 1,
                    stepSize: 1,
                }
            }],
            xAxes : [{
                ticks : {       
                     fontSize: 14,            

                }
            }]
        }

    }
});
</script>

最佳答案

yAxes 配置使用 reverse: true

yAxes: [
        {
            reverse: true, // will reverse the scale
        }
    ]

关于javascript - Chart.JS 如何更改 y 轴的顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47255187/

相关文章:

javascript - td 标签内有条件执行 php 脚本

javascript - angularjs 路由器和 jquerys 的 url 片段问题

javascript - 调整文本字段的大小?

jquery - 如何从 `ul li` 获取值并写入另一个 `ul li`

c# - ASP.NET 图表控件透明度

javascript - Highcharts:更改悬停时仪表图的针颜色

javascript - Fabric js - 在 Canvas 悬停时自由绘图,而不是单击/按下鼠标

javascript - 有什么方法可以根据其内容塑造 svg 容器?

java - 如何在 JAVAFX 2 中使用 AreaChart 绘制实时流数据图表 - 并发、动画、图表

python - openpyxl 图表误差线样式