[英]striped background in Victory chart
I am trying to create a bar chart with Victory and I need to customise the background.我正在尝试使用 Victory 创建条形图,并且需要自定义背景。 I know there is a
Background
component and by adding these lines to a VictoryChart
you can change the background color:我知道有一个
Background
组件,通过将这些行添加到VictoryChart
,您可以更改背景颜色:
<VictoryChart
padding={{left:100, top:50, bottom: 50, right: 10}}
domainPadding={{x: 20}}
domain={{ y: [0, 4] }}
theme={VictoryTheme.material}
tickFormat={(tick) => `${tick}`}
style={{
background: {
fill: "black"
}
}}
backgroundComponent={ <Background /> }
/>
I need however to have a striped background, with 4 different colours, one for each y value - ie from 0 to basso
is green, from basso
to medio
is orange and so on...然而,我需要有一个条纹背景,有 4 种不同的颜色,每个 y 值一个 - 即从 0 到
basso
是绿色,从basso
到medio
是橙色等等......
Is this something that can be achieved with Victory?这是胜利可以实现的吗? Any advice more than welcome
任何建议都非常受欢迎
Without knowing what your code looks like, I'll try this.在不知道你的代码是什么样子的情况下,我会试试这个。 replace the current
black
bg with a linear gradient.用线性渐变替换当前的
black
背景。
This solution assumes that each Y axis element is evenly spaced and only 4 of the, though if you need more than 4 just add them.此解决方案假定每个 Y 轴元素是均匀分布的,并且只有 4 个,但如果您需要超过 4 个,只需添加它们。
background: rgb(30,115,14);
background: linear-gradient(0deg, rgba(30,115,14,1) 0%, rgba(30,115,14,1) 25%, rgba(212,92,15,1) 25%, rgba(212,92,15,1) 50%, rgba(6,82,169,1) 50%, rgba(6,82,169,1) 75%, rgba(0,212,255,1) 75%, rgba(0,212,255,1) 100%);
I don't know about your project configuration.我不知道你的项目配置。 But I hope this will help you
但我希望这会对你有所帮助
https://react-tatkpg.stackblitz.io https://react-tatkpg.stackblitz.io
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.