Chart.js 饼图未显示在 Google Chrome 画布中答案

【问题标题】：Chart.js pie chart not showing in Google Chrome canvasChart.js 饼图未显示在 Google Chrome 画布中
【发布时间】：2018-11-02 15:01:30
【问题描述】：

测试版本：
谷歌浏览器 - 56.0.2924.87
Mozilla Firefox - 51.0.1（32 位）

在 Chrome 中开发我的应用时，我能够在其下方插入一个带有图例的饼图。但是一段时间后，我再次访问该页面并且图表不再呈现。在 Firefox 中尝试过它并呈现。
因此，通过我的测试，我能够通过将 Chart.js 版本从 0.2.0 更新到 2.5.0 来检测到 Chrome 无法呈现图形。

在 Chrome 中运行的唯一 Chart.JS 版本是 0.2.0 是真的吗，还是我的测试有误？

测试：

在 Chrome 中使用 Chart.JS v. 0.2.0

var pieData = [{
    value: 20,
    color: "#878BB6",

  },
  {
    value: 40,
    color: "#4ACAB4",

  },
  {
    value: 10,
    color: "#FF8153",

  },
  {
    value: 30,
    color: "#FFEA88",

  }
];
// Get the context of the canvas element we want to select
var myChart = document.getElementById("myChart").getContext("2d");
new Chart(myChart).Pie(pieData);

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>
</head>

<body>
  <script>
  </script>

  <h1>Chart.js Sample</h1>
  <canvas id="myChart" width="600" height="400"></canvas>
</body>

</html>

使用 Chart.JS v. 2.5.0

var pieData = [{
    value: 20,
    color: "#878BB6"
  },
  {
    value: 40,
    color: "#4ACAB4"
  },
  {
    value: 10,
    color: "#FF8153"
  },
  {
    value: 30,
    color: "#FFEA88"
  }
];
// Get the context of the canvas element we want to select
var ctx = document.getElementById("myData").getContext("2d");
//new Chart(ctx).Pie(pieData);
/* New way to instantiate so that it do not thows Uncaught
 TypeError: (intermediate value).Pie is not a function" */
var myPieChart = new Chart(ctx, {
  type: 'pie',
  data: pieData

});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js" type="text/javascript"></script>
</head>

<body>
  <script>
  </script>

  <h1>Chart.js Sample</h1>
  <canvas id="myData" width="600" height="400"></canvas>
</body>

</html>

【问题讨论】：

标签： javascript google-chrome chart.js pie-chart

【解决方案1】：

您的 2.5.0 版数据结构完全错误，它需要看起来更像这样（如果它在 Firefox 中使用显示的数据结构为您工作，那么我不知道为什么，因为它不应该有）：

var pieData = {
     labels: ["Purple", "Green", "Orange", "Yellow"],
     datasets: [
         {
             data: [20, 40, 10, 30],
             backgroundColor: [
                  "#878BB6", 
                  "#4ACAB4", 
                  "#FF8153", 
                  "#FFEA88"
             ]  
         }]
};

注意它不再是一个对象数组，而是一个包含数组的对象。 pieData 的直接属性也是标签和数据集，然后数据集被拆分为值和背景颜色。

饼图数据结构文档链接供参考：Chart JS Documentation

JSFiddle 示例：https://jsfiddle.net/0vh3xhsw/2/

【讨论】：

谢谢，没问题:)

【解决方案2】：

var pieData = {
   labels: ["Purple", "Green", "Orange", "Yellow"],
   datasets: [{
     data: [20, 40, 10, 30],
     backgroundColor: [
          "#878BB6", 
          "#4ACAB4", 
          "#FF8153", 
          "#FFEA88"
       ]  
    }]
};

// Get the context of the canvas element we want to select
var ctx = document.getElementById("myData").getContext("2d");
//new Chart(ctx).Pie(pieData);
/* New way to instantiate so that it do not thows Uncaught
 TypeError: (intermediate value).Pie is not a function" */
var myPieChart = new Chart(ctx, {
  type: 'pie',
  data: pieData

});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js" type="text/javascript"></script>
</head>

<body>
  <script>
  </script>

  <h1>Chart.js Sample</h1>
  <canvas id="myData" width="600" height="400"></canvas>
</body>

</html>

【讨论】：