Блог

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

Изменение цвета градиента диаграммы области в соответствии с переменной

#javascript #reactjs #recharts

#javascript #reactjs #повторно отображает

Вопрос:

Ссылка для ссылки
В Recharts react library вы можете добавлять градиентные заливки к диаграммам областей, используя следующий метод

 <AreaChart width={730} height={250} data={data}
  margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
  <defs>
    <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
      <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8}/>
      <stop offset="95%" stopColor="#8884d8" stopOpacity={0}/>
    </linearGradient>
    <linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
      <stop offset="5%" stopColor="#82ca9d" stopOpacity={0.8}/>
      <stop offset="95%" stopColor="#82ca9d" stopOpacity={0}/>
    </linearGradient>
  </defs>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid strokeDasharray="3 3" />
  <Tooltip />
  <Area type="monotone" dataKey="uv" stroke="#8884d8" fillOpacity={1} fill="url(#colorUv)" />
  <Area type="monotone" dataKey="pv" stroke="#82ca9d" fillOpacity={1} fill="url(#colorPv)" />
</AreaChart>

введите описание изображения здесь

В примере они использовали два элемента градиента с жестко заданным свойством «stopColor». Когда я задаю переменный цвет следующим образом stopColor = {areaColour} , это не работает
Область отображения

 const plots = [colour1, colour2]
//Rechart line
plots.map((areaColour, index) => <Area type="monotone" dataKey={data[index]} fill="url(#color)" />

Defs

 <defs>
    <linearGradient id="color" x1="0" y1="0" x2="0" y2="1">
      <stop offset="5%" stopColor={areaColour} stopOpacity={0.8}/>
      <stop offset="95%" stopColor="#8884d8" stopOpacity={0}/>
    </linearGradient>
</defs>

Есть ли способ использовать переменную внутри <defs> , чтобы я мог использовать ее для создания динамического градиента?

Метки: