Как добавить стрелку в последнюю точку LineChart? - PullRequest
Новая
       37

Как добавить стрелку в последнюю точку LineChart?

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

Фактическая потребность

enter image description here

На самом деле я вместо стрелки смог добавить кружок к последней точке. Но моя настоящая потребность - добавить стрелку к последней точке в соответствии с углом линии. Вот пользовательский компонент точки, который сгенерировал круг.

Что мне понадобилось

enter image description here

    function TinyChart({ data }) {
      const [chartData, setChartData] = useState(data);

      const x = 0;

      const CustomizedDot = (props) => {
        const {
          cx, cy, stroke, payload, value, index
        } = props;

        if (index === data.length - 1) {
          return (
            <svg x={cx - 2} y={cy - 2} width={40} height={40} fill="green" viewBox="0 0 1024 1024">
              <circle cx="50" cy="50" r="50" stroke="#003d73" strokeWidth="3" fill="#003d73" />
            </svg>
          );
        }
        return null;
      };

      return (
        <LineChart width={100} height={50} data={chartData}>
          <Line type="monotone" dataKey="pv" stroke="#003d73" strokeWidth={2} dot={<CustomizedDot />} />
        </LineChart>
      );
    }

    export default TinyChart;
...