【问题标题】:React Vis : Legend style and positionReact Vis:图例样式和位置
【发布时间】:2019-10-10 18:11:33
【问题描述】:

下面的代码给了我一张图片,但图例有点不合时宜。

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

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

<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>

【问题讨论】:

  • 您找到解决方案了吗?
  • 经过一番极端的谷歌搜索后,我发现一些关于为图例提供运行“绝对定位”的样式标签的极端解决方案的参考,但我担心它对我的口味来说太脆弱了。总之:我没有。

标签: react-vis


【解决方案1】:

尝试将 DiscreteColorLegend 移到 FlexibleXYPlot 之外(避免嵌套在 FlexibleXYPlot 中)。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-03-08
    • 2022-04-15
    • 2023-01-29
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多