如何在Rechart组件(React)上添加水印？

Question

我已经使用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;

提前感谢

Answer 1

我刚想到这件事。我采用了一个解决方案，在图形周围使用div的:after属性和一些CSS定位。

我在图表周围添加了一个Responsive容器(不是严格需要的，但可以使用不同的分辨率进行缩放)：

<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;
}

结果如下：

​

您可以在下面的JSfiddle中看到它(由于某些原因，它有时会出错)：Updated jsfiddle