首页 > 编程语言> > javascript-Chart.js饼图未显示在Google Chrome画布中

javascript-Chart.js饼图未显示在Google Chrome画布中

2019-10-26 06:46:58 作者：互联网

测试版本：
谷歌浏览器-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.2.0.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 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>

解决方法:

您的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/

标签：chart-js,google-chrome,pie-chart,javascript
来源： https://codeday.me/bug/20191026/1934631.html