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    
          }
        }]
     }
}

Docs

在反应图表

1 个答案: