1

尝试将 XYPlot 的背景和 0 以上的左轴设置为具有红色和绿色区域。我正在接近左轴部分，它目前位于轴下方。我仍然不确定要为图表的实际主体调整哪个部分。

而且我承认我的 CSS 技能很弱。但任何帮助将不胜感激。

这是我现在所在的代码笔： https ://codepen.io/onusigep/pen/eyZyar

return <div> 
    <XYPlot height={300} width={800} yDomain={[0, 200]} >
          <GradientDefs>
            <linearGradient id='CoolGradient' x1='0' x2='0' y1='0' y2='1'>
              <stop offset='0%' stopColor='green' stopOpacity={1.0} />
              <stop offset='25%' stopColor='white' stopOpacity={1.0} />
              <stop offset='75%' stopColor='white' stopOpacity={1.0} />
              <stop offset='75%' stopColor='red' stopOpacity={1.0} />
              <stop offset='100%' stopColor='white' stopOpacity={1.0} />
            </linearGradient>
          </GradientDefs>
          <VerticalGridLines />
          <HorizontalGridLines style={{ fill: '#000' }} />
          <XAxis tickValues={ticks} tickFormat={v => this.getTickValue(v)} tickLabelAngle={-45} />
          <YAxis />
          <LineMarkSeries data={data} color={'red'} />
          <Borders style={{
            bottom: {fill: '#fff', opacity: 0.3},
            left: {fill: 'url(#CoolGradient)', opacity: 0.3},
            right: {fill: '#fff'},
            top: {fill: '#fff'}
           }}/>
        </XYPlot>
    </div>;
4

0 回答 0