如何通过线性渐变将y轴的笔触颜色更改为

Question

我正在尝试将我的 y 轴笔触颜色更改为图表中的线性渐变。 我知道，我可以在 defs 元素和内部定义linerGradient元素中定义。 但是当我将我的笔画设置为stroke: "url(#linear)"时，y 轴笔画消失了。 这在折线图中对我有用，但在 y 轴上不起作用

 <defs> <linearGradient id="linear" x1="84" y1="5" x2="84.1" y2="470" > <stop offset="0%" stopColor="#05a" /> <stop offset="100%" stopColor="#0a5" /> </linearGradient> </defs> <YAxis tickMargin={8} tickLine={false} label={{ value: props.yAxisLabel, position: "insideBottomLeft", angle: -90, offset: 0, fill: "#A5A5A5", }} tick={{ fill: "#A5A5A5" }} ticks={[60, 120]} //TODO: change to function strokeWidth={10} // stroke="#FF3C06" stroke="url(#linear)" style={{ strokeLinecap: "round", }} />

有什么帮助吗？

Answer 1

我正在尝试将我的y轴笔触颜色更改为在图表中呈线性渐变。 我知道，我可以在defs元素中定义，并在内部定义linerGradient元素。 但是当我将笔划设置为stroke: "url(#linear)" ，y轴笔划消失了。 在折线图中对我有用，但在y轴上无效

 <defs> <linearGradient id="linear" x1="84" y1="5" x2="84.1" y2="470" > <stop offset="0%" stopColor="#05a" /> <stop offset="100%" stopColor="#0a5" /> </linearGradient> </defs> <YAxis tickMargin={8} tickLine={false} label={{ value: props.yAxisLabel, position: "insideBottomLeft", angle: -90, offset: 0, fill: "#A5A5A5", }} tick={{ fill: "#A5A5A5" }} ticks={[60, 120]} //TODO: change to function strokeWidth={10} // stroke="#FF3C06" stroke="url(#linear)" style={{ strokeLinecap: "round", }} />

有什么帮助吗？

Answer 2

如果您将 linearGradient 用于 YAxis，则需要向您的linearGradient添加一个道具，即gradientUnits

 <linearGradient gradientUnits="userSpaceOnUse"/>

所以这将使axisLine可见，并且在YAxis组件中您可以在下面给出类似的内容。因为axisLine道具只需要bool或object，您可以覆盖stroke以使该点指向您的渐变ID。

  <YAxis
    axisLine={{ stroke: "url(#<YOUR_GRADIENT_ID_NAME>)" }}
  />