图不会从零开始

Question

我正在开发仪表板，并试图使用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
                  width="100%"
                  height="400px"
                  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>
  );
}

Answer 1

在回答您的第一个问题时:在文档 for react google图表中，有一个名为: vAxis.minValue的配置选项，描述为：

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

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

vAxis: {minValue: 0}