Как добавить водяной знак на компонент Rechart (React)? - PullRequest
Новая
       48

Как добавить водяной знак на компонент Rechart (React)?

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

Я построил компонент, используя Recharts, чтобы показать LineChart. Есть ли способ вставить водяной знак в компонент Rechart / компонент React?

Ниже приведен код для моего компонента Rechart: 

import React, { PureComponent } from 'react';
import { LineChart } from 'recharts';

class MyBarChart extends PureComponent  {
    static jsfiddleUrl = 'https://jsfiddle.net/alidingling/xqjtetw0/';

    render() {
        const data = this.props.counts;

        return (
            <div>
            <LineChart
                width={500}
                height={300}
                data={data}
                margin={{
                    top: 5, right: 30, left: 20, bottom: 5,
                }}
            >
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="time" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Line type="monotone" dataKey="Negative" stroke="#cc0a00" activeDot={{ r: 8 }} />
            <Line type="monotone" dataKey="Neutral" stroke="#9e9e9e" />
            <Line type="monotone" dataKey="Positive" stroke="#00d14d" />
            </LineChart>
            </div>
        );
    }
}

export default MyBarChart;

Заранее спасибо

1 Ответ

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

Я только что это придумал. Я решил использовать свойство: after элемента div вокруг графика и некоторое позиционирование CSS.

Я добавил адаптивный контейнер (не обязательно, но позволяет масштабировать с различными разрешениями) вокруг вашей диаграммы. : 

<ResponsiveContainer className="watermark" width="100%" height={300} >
    <LineChart data={data} margin={{top: 5, right: 30, left: 20, bottom: 5}}>
        <XAxis dataKey="name"/>
        <YAxis/>
        <CartesianGrid strokeDasharray="3 3"/>
        <Tooltip/>
        <Legend />
        <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/>
        <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
    </LineChart>
</ResponsiveContainer>

Затем я добавил следующие CSS обновления: 

.watermark {
  position: relative;
}

.watermark:after {
  content: "";
  display: block;
  pointer-events: none;
  width: 210px;
  height: 150px;
  position: absolute;
  top: 0px;
  right: 30px;      
  background-image: url('https://cdn.iconscout.com/icon/premium/png-256-thumb/cat-131-378998.png');
  background-size: auto;
  background-position: 30px 30px;
  background-repeat: no-repeat;
  opacity: 0.1;
}

Вот результат: enter image description here

Вы можете см. ниже в JSfiddle (по некоторым причинам он иногда выдает ошибку): Обновлен jsfiddle

...