测试版本:
谷歌浏览器 - 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 与 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 与 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/
关于javascript - Chart.js 饼图未显示在 Google Chrome Canvas 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42551565/