Наложение текстового сообщения поверх графика - PullRequest
Новая
       13

Наложение текстового сообщения поверх графика

2 голосов
/ 16 марта 2019

Существуют ли варианты добавления наложенных текстовых сообщений поверх диаграммы, например, вложения?Или вы можете дать мне какие-либо ссылки для его реализации?

  • без сообщения

enter image description here

  • ссообщение

enter image description here

1 Ответ

0 голосов
/ 16 марта 2019

Я нашел почти тот же вопрос и ответ.Используется кольцевая диаграмма.

Добавить текст внутри кольцевой диаграммы из диаграммы js-2 в реакции

Затем я изменил ее с кольцевой диаграммы на линейную диаграмму.Это сработало.

https://codepen.io/yzono/pen/ZPoQKg

import React from 'react';
import ReactDOM from 'react-dom';
import {Line} from 'react-chartjs-2';

var originalDoughnutDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
  draw: function() {
    originalDoughnutDraw.apply(this, arguments);

    var chart = this.chart;
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx;

    var fontSize = (height / 114).toFixed(2);
    ctx.font = fontSize + "em sans-serif";
    ctx.fillStyle = "black";
    ctx.textBaseline = "middle";

    var text = chart.config.data.text,
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;

    ctx.fillText(text, textX, textY);
  }
});

const data = {
      labels: [
        "10/04/2018",
        "10/05/2018",
        "10/06/2018",
        "10/07/2018",
        "10/08/2018",
        "10/09/2018",
        "10/10/2018",
        "10/11/2018",
        "10/12/2018",
        "10/13/2018"
      ],
      datasets: [
        {
          label: "Temperature",
          data: [22, 19, 27, 23, 22, 24, 17, 25, 23, 24],
          fill: true,
          borderColor: "#ffebee",
          backgroundColor: "#ffebee"
        }
      ],
      text: "$3,881.38"
};

class DonutWithText extends React.Component {

  render() {
    return (
      <div>
        <h2>aReact Doughnut with Text Example</h2>
        <Line data={data} />
      </div>
    );
  }
};

ReactDOM.render(
  <DonutWithText />,
  document.getElementById('root')
);
...