尝试使用 Chart.js 设置刻度刻度 beginAtZero 不成功，为什么？

Question

尝试做这个图表对于 0 来说很重要，我需要从 0 开始，而不是从 650 开始，如图所示。

我做错了什么？，我无法解决：

看这里的图表图像

看代码，和文档说的一样：

<canvas id="myChart2015_5853aee63b981" width="500" height="500" style="display: block; width: 500px; height: 500px;"></canvas>
<script style="text/javascript">
                var ctx = document.getElementById("myChart2015_5853aee63b981");
                var myChart2015_5853aee63b981 = new Chart(ctx, {
                    type: 'bar',
                    data: {

            labels: ["Trimestre 1", "Trimestre 2", "Trimestre 3", "Trimestre 4"],
            datasets: [
                            {backgroundColor:['rgba(255, 99, 132, 0.2)','rgba(255, 99, 132, 0.2)','rgba(255, 99, 132, 0.2)','rgba(255, 99, 132, 0.2)'],borderColor:['rgba(255, 99, 132, 1)','rgba(255, 99, 132, 1)','rgba(255, 99, 132, 1)','rgba(255, 99, 132, 1)'], 
                        type: 'bar',
                        label: 'Total de pacientes',
                        data: [712,913,1030,1091],
                        options:  { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 }, 
                            {backgroundColor:['rgba(204, 230, 255,0.2)'],borderColor:['rgba(2, 173, 80,1)'], 
                        type: 'line',
                        label: 'Límite superior',
                        data: [700,700,700,700],
                        options:  { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 }, 
                            {backgroundColor:['rgba(36, 143, 36,0)'],borderColor:['rgba(75, 172, 198,1)'], 
                        type: 'line',
                        label: 'Meta',
                        data: [700,700,700,700],
                        options:  { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 }, 
                            {backgroundColor:['rgba(51, 51, 26,0)'],borderColor:['rgba(182, 87, 8,1)'], 
                        type: 'line',
                        label: 'Límite inferior',
                        data: [650,650,650,650],
                        options:  { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 }  
            ],
                options: {
                        tension:0.0,
                        scaleBeginAtZero: true,
                        scaleStartValue: 0,
                        scale: {
                            reverse:true,
                            ticks: {
                                beginAtZero: true
                            }
                        }

                    }
                }});
                </script>

Chart.js 的文档说：

    options: {
            scale: {
                reverse: true,
                ticks: {
                    beginAtZero: true
                }
            }
    }
});

// This will create a chart with all of the default options, merged from the global config,
//  and the Radar chart defaults but this particular instance's scale will be reversed as
// well as the ticks beginning at zero.

Answer 1

首先，您用于比例设置的代码 sn-p 是错误的。下面是设置比例的正确代码，使其从零开始。

options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}

其次，您的代码中有一个错误。你忘记了右花括号 对于 data 属性，但您在末尾添加了一个额外的花括号。下面是工作代码。

var ctx = document.getElementById("myChart2015_5853aee63b981");
                var myChart2015_5853aee63b981 = new Chart(ctx, {
                    type: 'bar',
                    data: {

            labels: ["Trimestre 1", "Trimestre 2", "Trimestre 3", "Trimestre 4"],
            datasets: [
                            {backgroundColor:['rgba(255, 99, 132, 0.2)','rgba(255, 99, 132, 0.2)','rgba(255, 99, 132, 0.2)','rgba(255, 99, 132, 0.2)'],borderColor:['rgba(255, 99, 132, 1)','rgba(255, 99, 132, 1)','rgba(255, 99, 132, 1)','rgba(255, 99, 132, 1)'], 
                        type: 'bar',
                        label: 'Total de pacientes',
                        data: [712,913,1030,1091],
                        options:  { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 }, 
                            {backgroundColor:['rgba(204, 230, 255,0.2)'],borderColor:['rgba(2, 173, 80,1)'], 
                        type: 'line',
                        label: 'Límite superior',
                        data: [700,700,700,700],
                        options:  { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 }, 
                            {backgroundColor:['rgba(36, 143, 36,0)'],borderColor:['rgba(75, 172, 198,1)'], 
                        type: 'line',
                        label: 'Meta',
                        data: [700,700,700,700],
                        options:  { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 }, 
                            {backgroundColor:['rgba(51, 51, 26,0)'],borderColor:['rgba(182, 87, 8,1)'], 
                        type: 'line',
                        label: 'Límite inferior',
                        data: [650,650,650,650],
                        options:  { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 }  
            ]},
                options: {
                        tension:1,
                        scaleBeginAtZero: true,
                        scaleStartValue: 0,
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero:true
                                }
                            }]
                        }

                    }
                });
                console.log(myChart2015_5853aee63b981);
                </script>

P.S :- 如果您不理解错误，请将您的代码与我的代码进行比较，您就会知道。