Блог

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

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

 import React, { useEffect } from "react";
import Chart from "chart.js";


var waterFallChart;

export default function WaterFallChart(props) {

  useEffect(() => {
    if (waterFallChart) {
      waterFallChart.destroy();
    }
    const ctx = document.getElementsByClassName(props.chartClass);
    waterFallChart = new Chart(ctx, {
      type: "bar",
      data: {
        labels: ["sun","mon","tue","wed","thurs","fri"],
        datasets: [
          {
            label: 'Good',
            data: [10,20,30,40,50,60],
            backgroundColor: "#0058FF",
          },
          ]
      },
      options: {
      maintainAspectRatio: false,
      showAllTooltips: false,
      scales: {
        yAxes: [
          {
            ticks: {
              fontColor: "silver",
              fontSize: "12",
            },
            display: true,

            gridLines: {
              display: true,
              zeroLineColor: "white",
              zeroLineWidth: "1",
            },
          },
        ],
        xAxes: [
          {
            ticks: {
              fontColor: "silver",
              fontSize: "10",
            },
            gridLines: {
              display: true,
              color: "rgb(255,255,255, 0.2)",
              zeroLineColor: "white",
              zeroLineWidth: "2",
            },
          },
        ],
      },
      legend: {
        display: false,
      },
    },
    });
});
return (
  <React.Fragment>
    <div className="canvasParentDiv">
      <canvas className={props.chartClass} />
    </div>
  </React.Fragment>
);
}
 

И основной компонент, который использует компонент WaterFallChart.

 import React from 'react'
import WaterFallChart from './WaterFallChart'


function mainComponent() {
    return (
        <div>
            <WaterFallChart chartClass="chart1" />
            <WaterFallChart chartClass="chart2" />
            <WaterFallChart chartClass="chart2"/>
        </div>
    )
}

export default mainComponent
 

Поскольку у нас не может быть одного и того же идентификатора для холста, я ориентируюсь на холст с именем класса, но он отображает только одну диаграмму, а остальные две остаются скрытыми.