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

首先，您用于缩放设置的代码段是错误的。下面是设置比例的正确代码，以便它从零开始。

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

其次，您的代码中存在一个错误。你忘记了结束大括号对于数据属性，但最后添加一个额外的花括号。以下是工作代码。

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： - 如果你不理解错误，将你的代码与我的代码进行比较，你会知道。

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

1 个答案: