recharts img не рендеринг в настроенной точке - PullRequest
Новая
       13

recharts img не рендеринг в настроенной точке

0 голосов
/ 25 января 2019

Я хочу отображать изображения из URL в виде точек для линейного графика.

Я добавил «CharacterDot», как показано в документации, но он ничего не рендерит. Если я использую тот же код, но использую SVG вместо изображения (именно так, как он используется в документах), он работает.

Это пример из документации. https://jsfiddle.net/alidingling/9y9zrpjp/

class CharacterDot extends Component {
    render() {
        const { cx, cy } = this.props;

        return (
            <img cx={cx - 15} cy={cy - 15} width={30} height={30} src='https://via.placeholder.com/100x100'/>
        );
    }
}

<ResponsiveContainer width='100%' height={400}>
    <LineChart data={data2} margin={{ right: 50, left: 50 }}>
        <Tooltip />
        <Line type="monotone" dataKey="value" stroke="black" strokeWidth="3px" dot={<CharacterDot />} />
    </LineChart>
</ResponsiveContainer>

1 Ответ

0 голосов
/ 06 февраля 2019

Вам необходимо установить флаг isAnimationActive для компонента Line 

<Line type='monotone'
    dataKey='value'
    stroke="black"
    isAnimationActive={false}
    dot={<CharacterDot />} />
...