我正在尝试使用 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 中显示周或月条形图?