时间戳

首页 > 解决方案 > 如何在 react-chartjs-2 中设置下限和上限？

reactjs - 如何在 react-chartjs-2 中设置下限和上限？

问题描述

该代码显示了当周数据库中一天的销售数量的条形图。我面临的问题是，下限和上限分别设置为每天的最低销售额和最高销售额。有没有办法将下限设为 0，上限设为最大数据 + 4？

反应式

import React, {useEffect,useState} from 'react'
import {Bar} from 'react-chartjs-2';
import moment from "moment";
import Axios from "axios";


export default function Chart() {
    const [chartvalues,setchartvalues]=useState([])
    var day1,day2,day3,day4,day5,day6,day7,dispday1,dispday7
    const today = moment();
    day1 =moment().day(0).format("dddd").toString();
    day2  = moment().day(1).format("dddd").toString();
    day3  = moment().day(2).format("dddd").toString();
    day4  = moment().day(3).format("dddd").toString();
    day5  = moment().day(4).format("dddd").toString();
    day6  = moment().day(5).format("dddd").toString();
    day7 = moment().day(6).format("dddd").toString();
    
    dispday1 = today.startOf('week').format("DD-MM-YYYY").toString();
    dispday7 = today.endOf('week').format("DD-MM-YYYY").toString();

    var disp1day1 = moment().day(0).format("YYYY-MM-DD").toString();
    var dispday2  = moment().day(1).format("YYYY-MM-DD").toString();
    var dispday3  = moment().day(2).format("YYYY-MM-DD").toString();
    var dispday4  = moment().day(3).format("YYYY-MM-DD").toString();
    var dispday5  = moment().day(4).format("YYYY-MM-DD").toString();
    var dispday6  = moment().day(5).format("YYYY-MM-DD").toString();
    var disp1day7 = moment().day(6).format("YYYY-MM-DD").toString();
    useEffect(() => {
        Axios.post('http://localhost:3001/getdate', {
            day1 : disp1day1,
            day2  : dispday2,
            day3  : dispday3,
            day4  : dispday4,
            day5  : dispday5,
            day6  : dispday6,
            day7 : disp1day7,
        }).then(() => {
           console.log("dates sent!")
           Axios.get('http://localhost:3001/getchartdata').then((response) => {
           setchartvalues(response.data)
           console.log("chartvalues",response.data)

          })
        });
    })
    

    const chartData ={labels: [day1,day2 ,day3 ,day4 ,day5 ,day6 ,day7 ],
    datasets: [
        {
            label: "Daily Sales",
            data: 
                chartvalues.map((number)=>{   
                    return number.NoIt
                },)
            ,
            backgroundColor: [
                'rgba(255, 99, 132, 0.6)',
                'rgba(54, 162, 235, 0.6)',
                'rgba(255, 206, 86, 0.6)',
                'rgba(75, 192, 192, 0.6)',
                'rgba(153, 102, 255, 0.6)',
                'rgba(255, 159, 64, 0.6)',
                'rgba(255, 100, 64, 0.6)',
            ]
        }
    ]
    
}
    return (
        <div>
            <h1>Sales from {dispday1} to {dispday7} </h1>
             <Bar
                    data={chartData}
                    options={{
                        
                    }}
                />
        </div>
    )
}

谢谢您的帮助！

标签： reactjschart.js

解决方案

您可以使用该suggestedMax属性，在示例中我将 stepSize 设置为 1，如果您不这样做，它会将其舍入到下一个可用的 stepsize 以保持比例缩放的完整。

要从零开始，您可以将beginAtZero刻度配置中的道具设置为 true

const data = [12, 19, 3, 5, 2, 3];
const maxDataEntry = Math.max(...data);

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data,
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false,
          suggestedMax: maxDataEntry + 4,
          stepSize: 1,
          beginAtZero: true
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

推荐阅读