reactjs - 使用 react-vis 的动态列的垂直分组条形图

Question

使用 react-vis 的动态列的垂直分组条形图

使用 react-vis 竖线的输出

预期产出

<XYPlot
                        xType={chartData['type']}
                        width={width}
                        height={height}>
                        <VerticalGridLines style={gridLineStyle} />
                        <HorizontalGridLines style={gridLineStyle} />
                        <XAxis tickLabelAngle={xAxisAngle} style={tickStyle} tickFormat={chartData['type'] == 'linear' ? tick => this.formatNumber(tick) : null} />
                        <YAxis tickLabelAngle={yAxisAngle} style={tickStyle} tickFormat={tick => this.formatNumber(tick)} />
                        <ChartLabel
                            text={chartData['name']}
                            className="alt-x-label"
                            includeMargin={false}
                            xPercent={0.5}
                            yPercent={1.18}
                            style={{
                                fontWeight: 'bold',
                                textAnchor: 'middle',
                                fontSize: "12px",
                                fill: "#6b6b76",
                                fontFamily: "sans-serif"
                            }}
                        />
                        <ChartLabel
                            text={'No. of variants'}
                            className="alt-y-label"
                            includeMargin={false}
                            xPercent={-0.02}
                            yPercent={0.5}
                            style={{
                                transform: 'rotate(-90)',
                                fontWeight: 'bold',
                                textAnchor: 'middle',
                                fontSize: "12px",
                                fill: "#6b6b76",
                                fontFamily: "sans-serif"
                            }}
                        />
                        {hoveredNode && (
                            <Hint value={hoveredNode}>
                                <div style={{ background: '#000000' }}>
                                    <p style={{ fontSize: "10px", padding: "3px", color: '#ffffff' }}>{`${hoveredNode.y} variants with ${chartData['name']} of ${hoveredNode.x}`}</p>
                                </div>
                            </Hint>
                        )}
                        <BarSeries data={A} />
                        <BarSeries data={C} />
                        <BarSeries data={G} />
                        <BarSeries data={T} />
                    </XYPlot>

我得到三个 3 条，但总是有四分之一的空条。这是不需要的。任何建议都会有所帮助。谢谢