react-vis - React Vis：图例样式和位置

Question

下面的代码给了我一张图片，但图例有点糟糕。

所以现在不让我上传图片，但是图例卡在左下角……而且很小。

有没有办法控制图例位置和/或增加文本大小等？

<div style={{height: "90vh", width: "95vw"}}>
                    <FlexibleXYPlot
                        xType="time"
                        colorType="category"
                        // onMouseLeave={this._onMouseLeave}
                        // style={{bottom:'50', top:'50'}}
                        // margin={{left: 40, right: 10, top: 30, bottom: 85}}
                    >
                        <DiscreteColorLegend
                            // onItemClick={this.clickHandler}
                            orientation="horizontal"

                            // width={180}
                            items={series.map(series => {
                                // console.log(series.props.colour+"");
                                return {title: series.props.color+"", color: series.props.color}
                            })
                            }
                        />
                        <HorizontalGridLines/>
                        <XAxis top={0} title="Dates"/>
                        <YAxis title="Price"/>
                        {series}
                    </FlexibleXYPlot>
                </div>

Answer 1

尝试将 DiscreteColorLegend 移到 FlexibleXYPlot 之外（而不是嵌套在 FlexibleXYPlot 中）。