边缘浏览器不使用图表js渲染图表答案

【问题标题】：Edge browser does not render chart using chart js边缘浏览器不使用图表js渲染图表
【发布时间】：2020-05-25 07:35:28
【问题描述】：

我正在使用 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;

问题详情：

【问题讨论】：

我已经用一些测试数据（如this）测试了你的代码，看来代码在我这边运行良好（screenshot），请尝试清除浏览器数据并重新检查它。此外，在我的 react 应用程序中，我已经安装了 react-app-polyfill，你可以尝试安装它。如果仍然不能解决问题，可能问题与另一部分代码有关，您能否发布足够的代码（或创建Codepen）来重现问题。
该问题在旧边缘 44.18362.449.0 中可重现。当我在新的铬边上尝试这个时，这是不可重现的。你能告诉我你试过哪个版本的edge吗？同时我将在 codepen 上工作
我也在使用 Microsoft Edge 44.18362.449.0 版本。

标签： charts chart.js microsoft-edge react-chartjs

【解决方案1】：

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

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>
    );
  }
}

在线演示：https://stackblitz.com/edit/react-zxrxws?file=serviceWorker.js

如果您仍然无法使其在 Edge Legacy 上运行，希望您可以提供一个可重现的示例进行测试。

【讨论】：