Линейный график с использованием диаграммы js реакция - PullRequest
Новая
       4

Линейный график с использованием диаграммы js реакция

0 голосов
/ 08 января 2020

Я реализовал линейную диаграмму, используя диаграмму. js в реакции, диаграмма неправильно указывает метку в наборах данных. Я показал код ниже.

диаграммы появляются, но метка указателя отображается неправильно, то есть все указатели указывают на первую метку

У меня есть index, в которую включены диаграмма и пропущенные реквизиты и multilinechart реализованная диаграмма 

//index.js
import React from "react";
import MultiLineChart from "./Charts/MultiLineChart";

class IndexChart extends React.PureComponent {
  constructor(props) {
    super(props);
     this.state ={
      apidata: {
         [{
        id: "1110"
        date: "12-12-2019"
        amount: 614400
        rec: 121
        title: "SG"
         },{
         id: "1210"
        date: "13-12-2019"
        amount: 3400
        rec: 20
        title: "SG"
        },{
         id: "1110"
        date: "14-12-2019"
        amount: 2400
        rec: 34
        title: "SG"
        }]
       }
     }
  }

  render(){
    return (
     <div>
       <MultiLineChart   
 data={
                    this.state.apidata.map(e => ({
                      label: e.date,
                      data: [e.rec],
                      fill: false,
                      backgroundColor: #787897,
                      borderColor: #787897, // Add custom color border (Line)
                      borderWidth: 1
                    }))
                  }
                  color="#5487D8"
                  labels={this.state.apidata.map(e => e.date)}

     />
    </div>
    );
  }
}

//MultiLineChart.js
import React from "react";
import { Chart } from "chart.js";
class MultiLineChart extends React.Component {
  constructor(props) {
    super(props);
    this.canvasRef = React.createRef();
  }
  componentDidUpdate() {    
     this.myChart.data.labels = this.props.labels;
     this.myChart.data.datasets = this.props.data;
     this.myChart.update();
  }
  componentDidMount() {
    var c = document.getElementById("multi_line_chart");
    var ctx = c.getContext("2d");
    if (typeof this.myChart != "undefined") {
      this.myChart.destroy();
    }
    this.myChart = new Chart(this.canvasRef.current, {
      type: "line",
      data: {
        labels: this.props.labels,
        datasets: this.props.data
      },
      options: {
        responsive: true,
        legend: { display: true, position: "bottom" },
        maintainAspectRatio: false,
        scales: {
          yAxes: [
            {
              ticks: {
                min: 10
              }
            }
          ]
        }
      }
    });
  }

  render() {
     return (
      <div className="chartCanvas">
        <canvas ref={this.canvasRef} id="multi_line_chart" />
      </div>
    );
  }
}
export default MultiLineChart;
...