图表不会从零开始

Posted 2023-02-16

【中文标题】图表不会从零开始

【英文标题】：Graph won't start at zero

【发布时间】：2022-01-20 00:05:39

【问题描述】：

我正在使用仪表板，我正在尝试使用 mongodb 在图表上显示每日销售额。我遇到的问题是我的图表不是从 0 开始，而是从更接近我输入的每日最低销售额的数字开始。此外，该图表仅显示有销售的两个日期，我想知道是否有办法将所有日期包括在这些日期之间和之后？我非常感谢有关如何解决此问题的任何帮助或建议。谢谢！

OrderRouter.js

import express from 'express';
import expressAsyncHandler from 'express-async-handler';
import Order from '../models/orderModel.js';
import User from '../models/userModel.js';
import Product from '../models/productModel.js';
import isAdmin, isAuth, isSellerOrAdmin, mailer, payOrderEmailTemplate from '../utils.js';


orderRouter.get(
  '/summary',
  isAuth,
  isAdmin,
  expressAsyncHandler(async (req, res) => 

    const dailySales = await Order.aggregate([
      
        $group: 
          _id:  $dateToString:  format: '%m-%d-%Y', date: '$createdAt'  ,
          orders:  $sum: 1 ,
          sales:  $sum: '$totalPrice' ,
        ,
      ,
       $sort:  _id: 1  ,
    ]);


    res.send( dailySales );
  )
);



export default orderRouter;

DashboardScreen.js

import  useDispatch, useSelector  from 'react-redux';
import Chart from 'react-google-charts';
import  summaryOrder  from '../actions/orderActions';
import LoadingBox from '../components/LoadingBox';
import MessageBox from '../components/MessageBox';


export default function DashboardScreen() 
  const orderSummary = useSelector((state) => state.orderSummary);
  const  loading, summary, error  = orderSummary;
  const dispatch = useDispatch();
  useEffect(() => 
    dispatch(summaryOrder());
  , [dispatch]);
 

  return (
    <div>
      <div className="line">
      </div>
    <div className="background">
      
    <div>
        <h1>Dashboard</h1>
      </div>
      loading ? (
        <LoadingBox />
      ) : error ? (
        <MessageBox variant="danger">error</MessageBox>
      ) : (
        <>
          
          <div className="graphs">
           <div>
            <h2 className="graphname">Daily Sales</h2>
              summary.dailySales.length === 0 ? (
                <MessageBox>No Sale</MessageBox>
              ) : (
                <Chart
                  
                  
                  chartType="AreaChart"
                  loader=<div>Loading Chart</div>
                  data=[
                    ['Date', 'Sales'],
                    ...summary.dailySales.map((x) => [x._id, x.sales]),
                  ]
                ></Chart>
              )
            </div>
          </div>

          <div>
            
          </div>
        </>
      )
    </div>
    </div>
  );

【参考方案1】：

回答您的第一个问题：在 react-google-charts 的 Documentation 中，有一个名为：vAxis.minValue 的配置选项，描述为：

将纵轴的最小值移动到指定值；在大多数图表中，这将是向下的。如果设置的值大于数据的最小 y 值，则忽略此值。

我打赌这会对你有所帮助。在文档中，还有一个实现示例：

vAxis: minValue: 0