在反应图中设置Y轴的最大值

Question

我已经在以下文档的帮助下实现了一个反应图

http://www.chartjs.org/docs/latest/charts/line.html

我已经成功实现了它，但是此文档未显示如何为y轴设置最大值。 我想将最大y轴设置为100。但是由于我的数据集没有超过19的任何值，因此最大y轴设置为20。

即使我的数据不超过19，如何将y轴的最大值设置为100？

我的密码

class LineCharts extends Component {

    constructor() {
        super();

    }

    render() {

        var chartData = {

            labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
            datasets: [
                {
                    color: "#4D5360",
                    highlight: "#616774",
                    borderColor: "rgba(179,181,198,1)",
                    pointBackgroundColor: "rgba(179,181,198,1)",
                    pointBorderColor: "#fff",
                    pointHoverBackgroundColor: "#fff",
                    pointHoverBorderColor: "rgba(179,181,198,1)",
                    label: 'Current lag',
                    fill: true,
                    lineTension: 0.1,
                    fillColor: "rgba(151,187,205,0.2)",
                    strokeColor: "rgba(151,187,205,1)",
                    pointColor: "rgba(151,187,205,1)",
                    pointStrokeColor: "#fff",
                    scaleOverride: true,
                    scaleStartValue: 0,
                    scaleStepWidth: 1,
                    scaleSteps: 5,
                    data: [12, 19, 3, 5, 2, 3, 4, 7, 9, 3, 12, 19],
                },


            ],

        }

        var chartOptions = {
            showScale: true,
            pointDot: true,
            showLines: false,

            title: {
                display: true,
                text: 'Chart.js Bar Chart'
            },

            legend: {
                display: true,
                labels: {
                    boxWidth: 50,
                    fontSize: 10,
                    fontColor: '#bbb',
                    padding: 5,
                }
            },

        }

        return (

            <LineChart data={chartData} options={chartOptions} width="600" height="250"/>

        );
    }
}
export default LineCharts;

Answer 1

您可以尝试以下方法：

var chartOptions = {
    showScale: true,
    pointDot: true,
    showLines: false,

    title: {
        display: true,
        text: 'Chart.js Bar Chart'
    },

    legend: {
        display: true,
        labels: {
            boxWidth: 50,
            fontSize: 10,
            fontColor: '#bbb',
            padding: 5,
        }
    },

    scales: {
      yAxes: [{
          ticks: {
              beginAtZero:true,
              min: 0,
              max: 100    
          }
        }]
     }
}

文件