Recharts - не может изменить LineChart legendType - PullRequest
Новая
       21

Recharts - не может изменить LineChart legendType

0 голосов
/ 20 апреля 2020

Проблема: Я не могу изменить LineChart legendType моего компонента Line.

Пожалуйста, смотрите мой код ниже. Как вы можете видеть, я попытался установить для легенды-типа моего компонента Line значение типа ромб и крест, однако это не меняет вид легенды на графике, а ромб и крест отображаются только в таблице легенды. Легенда My Line по-прежнему остается «линией» по умолчанию.

Если кто-то может указать, что я делаю неправильно, было бы очень полезно, спасибо. 

const {AreaChart, Legend, LineChart, Line, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer} = Recharts;
const data = [
      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
      {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
      {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
      {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
      {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
];
const SimpleAreaChart = React.createClass({
    render () {
    return (
        <ResponsiveContainer>
        <LineChart data={data}
              margin={{top: 10, right: 30, left: 0, bottom: 0}}>
          <CartesianGrid strokeDasharray="3 3"/>
          <XAxis dataKey="name"/>
          <YAxis/>
          <Tooltip cursor={true}/>
          <Line type='monotone' legendType='diamond' dataKey='uv' stroke='#8884d8'/>
          <Line type='monotone' legendType='cross' dataKey='pv' stroke='#82ca9d'/>
          <Legend />
        </LineChart>
      </ResponsiveContainer>
    );
  }
})

Также другой вопрос, если вы читали это далеко:

Кто-нибудь знает, как динамически загружать легенду? Например, загружать легенду только при наличии соответствующих данных. В настоящее время у меня есть максимум 50 строк для построения графика, однако каждая строка будет отображаться, только если я сделаю вызов API, поэтому мне не нужно было бы отображать сразу все 50 легенд. Мне нужна только отдельная легенда, когда я вызываю API для соответствующих данных.

Спасибо,

...