1

我正在尝试使用 BizCharts 制作此屏幕截图。在这种情况下,x-Labels 将始终是固定的,并且将相应地显示数据。如果任何一天都没有数据,那么图表中就不会出现当天的条形图。

在此处输入图像描述

这是我的数据的样子:

     data=[
            {
                "date": "Tuesday",
                "name": "Battery Materials",
                "totalWeight": 150
            },
            {
                "date": "Tuesday",
                "name": "Consumer Batteries",
                "totalWeight": 1423
            },
            {
                "date": "Wednesday",
                "name": "High Voltage",
                "totalWeight": 75.5
            },
            {
                "date": "Friday",
                "name": "Consumer Battery",
                "totalWeight": 1338
            }
         ]

我试过了,但它没有显示星期一、星期四和星期六。

    <Chart height={400} padding="auto" data={data} autoFit>
        <Interval
            adjust={[
                {
                    type: 'stack',
                },
            ]}
            color="name"
            position="date*totalWeight"
        />
        <Tooltip shared />
    </Chart>

如何将 x 轴定义为数组['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']并相应地显示数据?

https://bizcharts.net/product/BizCharts4/demo/312

我也尝试过添加默认 JSON 对象,totalWeight=0但工具提示显示错误计数。

const data = [
         {
            "date": "Monday",
            "name": "Battery Materials",
            "totalWeight": 0
         },
         {
            "date": "Monday",
            "name": "Consumer Battery",
            "totalWeight": 0
         },
         {
            "date": "Monday",
            "name": "High Voltage",
            "totalWeight": 0
         },
         {
            "date": "Tuesday",
            "name": "Battery Materials",
            "totalWeight": 0
         },
         {
            "date": "Tuesday",
            "name": "Consumer Battery",
            "totalWeight": 0
         },
         {
            "date": "Tuesday",
            "name": "High Voltage",
            "totalWeight": 0
         },
         {
            "date": "Wednesday",
            "name": "Battery Materials",
            "totalWeight": 0
         },
         {
            "date": "Wednesday",
            "name": "Consumer Battery",
            "totalWeight": 0
         },
         {
            "date": "Wednesday",
            "name": "High Voltage",
            "totalWeight": 0
         },
         {
            "date": "Thursday",
            "name": "Battery Materials",
            "totalWeight": 0
         },
         {
            "date": "Thursday",
            "name": "Consumer Battery",
            "totalWeight": 0
         },
         {
            "date": "Thursday",
            "name": "High Voltage",
            "totalWeight": 0
         },
         {
            "date": "Friday",
            "name": "Battery Materials",
            "totalWeight": 0
         },
         {
            "date": "Friday",
            "name": "Consumer Battery",
            "totalWeight": 0
         },
         {
            "date": "Friday",
            "name": "High Voltage",
            "totalWeight": 0
         },
         {
            "date": "Saturday",
            "name": "Battery Materials",
            "totalWeight": 0
         },
         {
            "date": "Saturday",
            "name": "Consumer Battery",
            "totalWeight": 0
         },
         {
            "date": "Saturday",
            "name": "High Voltage",
            "totalWeight": 0
         },
         {
            "date": "Sunday",
            "name": "Battery Materials",
            "totalWeight": 0
         },
         {
            "date": "Sunday",
            "name": "Consumer Battery",
            "totalWeight": 0
         },
         {
            "date": "Sunday",
            "name": "High Voltage",
            "totalWeight": 0
         },
                  {
                "date": "Tuesday",
                "name": "Battery Materials",
                "totalWeight": 150
            },
            {
                "date": "Tuesday",
                "name": "Consumer Battery",
                "totalWeight": 1423
            },
            {
                "date": "Wednesday",
                "name": "High Voltage",
                "totalWeight": 75.5
            },
            {
                "date": "Friday",
                "name": "Consumer Battery",
                "totalWeight": 1338
            }];

在此处输入图像描述

是否有任何替代框架可以在 React 中显示周或月条形图?

4

0 回答 0