Edge浏览器不使用图表js呈现图表

Question

我正在使用react-chartjs-2（2.9.0）和chart.js（2.9.3）在我的react应用程序中创建图表。图表在除Microsoft Edge 44.18362.449.0之外的所有浏览器中均能正常工作。

代码：

import React, { Component } from 'react';
import { Pie } from 'react-chartjs-2';
import { ReportSettings } from './ReportSettings';
import 'chartjs-plugin-labels';

class PIEChart extends Component {
  render() {
    const { reportData } = this.props;
    let dataArr = [
      reportData.Last360DaysCount,
      reportData.Last180DaysCount,
      reportData.Last90DaysCount,
      reportData.Last30DaysCount,
    ];
    let labels = ['Last 360 days', 'Last 180 days', 'Last 90 days', 'Last 30 days'];
    const data = {
      labels: labels,
      datasets: [
        {
          backgroundColor: ['#6264A7', '#ddd', '#929191', '#BDBDE6', '#333', 'Purple'],
          data: dataArr,
          fill: true,
          borderColor: '#fff',
          hoverBackgroundColor: ['#6264A7', '#ddd', '#929191', '#BDBDE6', '#333', 'Purple'],
        },
      ],
    };
    return (
      <div className="Report">
        <article className="canvas-container">
          <div className="teamsummary">
            <Pie data={data} width={400} height={400} />
          </div>
        </article>
      </div>
    );
  }
}

export default PIEChart;

问题详细信息：

说明：“无效的参数。”消息：“无效的参数。”编号：-2147024809堆栈：“错误：参数无效。在更新（http://localhost:3000/static/js/bundle.js:30571:3）处的fitBoxes（http://localhost:3000/static/js/bundle.js:30474:3）在更新（http://localhost:3000/static/js/bundle.js:22325:3）在fit（http://localhost:3000/static/js/bundle.js:22539:3）在更新（http://localhost:3000/static/js/bundle.js:24878:3 ]）在结构（http://localhost:3000/static/js/bundle.js:24831:3）在图表（http://localhost:3000/static/js/bundle.js:24555:3）在renderChart（http://localhost:3000/static/js/bundle.js:24492:2）在componentDidMount（http://localhost:3000/static/js/bundle.js:113285:5）在commitLifeCycles（http://localhost:3000/static/js/bundle.js:113090:5）在callCallback（http://localhost:3000/static/js/bundle.js:140426:13处的commitLayoutEffects（http://localhost:3000/static/js/bundle.js:143660:7） ）“

Answer 1

我使用'react-chartjs-2'在R​​eact中创建图表，该图表在Microsoft Edge 44.18362.449.0上成功运行，主要代码如下：

http://localhost:3000/static/js/bundle.js:118694:9

在线演示：

import React from 'react';
import logo from './logo.svg';
import './App.css';
import {Pie, Doughnut} from 'react-chartjs-2';

const state = {
  labels: ['January', 'February', 'March',
           'April', 'May'],
  datasets: [
    {
      label: 'Rainfall',
      backgroundColor: [
        '#B21F00',
        '#C9DE00',
        '#2FDE00',
        '#00A6B4',
        '#6800B4'
      ],
      hoverBackgroundColor: [
      '#501800',
      '#4B5000',
      '#175000',
      '#003350',
      '#35014F'
      ],
      data: [65, 59, 80, 81, 56]
    }
  ]
}

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Pie
          data={state}
          options={{
            title:{
              display:true,
              text:'Average Rainfall per month',
              fontSize: 20
            },
            legend:{
              display:true,
              position:'right'
            }
          }}
        />

        <Doughnut
          data={state}
          options={{
            title:{
              display:true,
              text:'Average Rainfall per month',
              fontSize:20
            },
            legend:{
              display:true,
              position:'right'
            }
          }}
        />
      </div>
    );
  }
}

如果仍然无法在Edge Legacy上使用它，希望您可以提供可复制的示例进行测试。