2

我正在使用 react-vis 图来生成直方图数据。如果我们有 x 和 y 轴的单独条目,则该图可以正常工作。但是当我们有相同的 x 轴值和多个 y 轴值时,它会失败并且看起来会变形,反之亦然。

有没有办法处理这种数据?

我正在使用以下代码生成图表

<XYPlot
                    xType='ordinal'
                    colorType={this.props.color}
                    width={charWidth}
                    height={charHeight}
                    yDomain={charDomain}
                    style={{
                        fontSize:'14px',
                        fontWeight:'400',
                        textAlign:'left'
                    }}>
                    {/* <HorizontalGridLines /> */}
                    <XAxis  hideLine = {false} style={{fontSize:'12px',fontWeight:'400'}} />
                    <YAxis  hideLine = {false}/>
                    {/* <XAxis  hideLine = {false} style={{fontSize:'12px',fontWeight:'400'}}/>
                    <YAxis />

                    <ChartLabel
                        text={this.props.xLabelTitle}
                        className="alt-y-label"
                        includeMargin={true}
                        xPercent={0.06}
                        yPercent={0.06}
                        style={{
                        transform: 'rotate(-90)',
                        textAnchor: 'end'
                        }}
                       /> */}
                    <VerticalBarSeries data={data} barWidth={this.props.barWidth} />
                    <LabelSeries
                        data={ data.map(obj =>{
                            return {...obj,label:obj.y.toString()}
                        })}
                        labelAnchorX="middle"
                        labelAnchorY="text-after-edge" 
                        style={{fontSize:'13px',fontWeight:'700'}}
                    />
                </XYPlot>
4

0 回答 0