图表不会从零开始答案

【问题标题】：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
                  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>
  );
}

【问题讨论】：

标签： node.js reactjs mongodb

【解决方案1】：

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

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

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

vAxis: {minValue: 0}

【讨论】：