javascript - Chart.js 反转 Y 轴但将背景填充保持在下方

Question

我正在尝试使用 chart.js 绘制数据，并希望我的数据从高到低，以便 Y 轴的顶部是 0，底部是我的最高数字。

我对轴使用了 reverse 选项，但这意味着我的背景填充也反转了。我想不出一种方法来让它工作，以便在轴反转时我的填充仍然在线下方。

 var ctx = document.getElementById("diaryChart").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                datasets: [{
                    label: 'Position in company',
                    data: [12, 19, 3, 5, 2, 3, 7, 8, 13, 10, 5, 2],
                    backgroundColor: [
                        'rgba(50, 66, 92, 0.3)'
                    ],
                    borderColor: [
                        'rgba(0, 0, 0,1)'
                    ],
                    borderWidth: 3
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        display: false,
                        ticks: {
                            beginAtZero: true,
                            reverse: true,
                            start: 0
                        }
                    }]
                }
            }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<canvas id="diaryChart" class="diary-chart__chart" width="925" height="161"></canvas>

Answer 1

我终于能够通过添加选项来解决这个问题:fill: "start" 到数据集选项。

 var ctx = document.getElementById("diaryChart").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                datasets: [{
                    label: 'Position in company',
                    data: [12, 19, 3, 5, 2, 3, 7, 8, 13, 10, 5, 2],
                    backgroundColor: [
                        'rgba(50, 66, 92, 0.3)'
                    ],
                    borderColor: [
                        'rgba(0, 0, 0,1)'
                    ],
                    borderWidth: 3,
                    fill: "start"
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        display: false,
                        ticks: {
                            beginAtZero: true,
                            reverse: true,
                            start: 0
                        }
                    }]
                }
            }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<canvas id="diaryChart" class="diary-chart__chart" width="925" height="161"></canvas>