Блог

Главная - Вопросы по программированию - как изменить цвет обводки оси y на линейный градиент

как изменить цвет обводки оси y на линейный градиент

#javascript #reactjs #recharts

#javascript #reactjs #перезаряжается

Вопрос:

Я пытаюсь изменить цвет обводки по оси y на линейный градиент при перезарядке. Я знаю, я могу определить в элементе defs и внутри linerGradient элемента define. но когда я устанавливаю значение обводки равным 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",
                    }}
                />

любая помощь?

Ответ №1:

Я только что решил это, добавив fill="url(#linear)" вместо stroke="url(#linear)"

Ответ №2:

Если вы используете LinearGradient для yAxis, вам нужно добавить к вашему LinearGradient еще одну опору — gradientUnits

  <linearGradient gradientUnits="userSpaceOnUse"/>

Таким образом, это сделает видимой линию оси, а в компоненте yAxis вы можете указать что-то вроде этого ниже.Поскольку axisLine prop принимает только bool или object, вы можете переопределить обводку, чтобы указать на ваш идентификатор градиента.

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