Tested versions:
Google Chrome - 56.0.2924.87
Mozilla Firefox - 51.0.1 (32-bit)
While developing my app in Chrome, I was able to insert a pie graphic with legends beneath it. But some time after I went to that page again and the graph did not render anymore. Tried it in Firefox and it rendered.
So by my tests I was able to detect that by updating the Chart.js version from 0.2.0 to 2.5.0 it made impossible for Chrome to render the graph.
Is it true that the only Chart.JS version to work in Chrome is the 0.2.0, or my tests are wrong?
TESTS:
Using Chart.JS v. 0.2.0 in Chrome
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=".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>Tested versions:
Google Chrome - 56.0.2924.87
Mozilla Firefox - 51.0.1 (32-bit)
While developing my app in Chrome, I was able to insert a pie graphic with legends beneath it. But some time after I went to that page again and the graph did not render anymore. Tried it in Firefox and it rendered.
So by my tests I was able to detect that by updating the Chart.js version from 0.2.0 to 2.5.0 it made impossible for Chrome to render the graph.
Is it true that the only Chart.JS version to work in Chrome is the 0.2.0, or my tests are wrong?
TESTS:
Using Chart.JS v. 0.2.0 in Chrome
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./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>Using 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./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 Answers
Reset to default 4Your data structure for version 2.5.0 is pletely wrong, it needs to look more like this (if it was working for you in Firefox using the shown data structure then I have no idea why, because it shouldn't have):
var pieData = {
labels: ["Purple", "Green", "Orange", "Yellow"],
datasets: [
{
data: [20, 40, 10, 30],
backgroundColor: [
"#878BB6",
"#4ACAB4",
"#FF8153",
"#FFEA88"
]
}]
};
Notice how it's no longer an array of objects, but an object containing arrays. Also the direct properties of pieData are labels and datasets and then datasets is split into the values and the background color.
Link to the Pie Chart data structure documentation for reference: Chart JS Documentation
JSFiddle example: https://jsfiddle/0vh3xhsw/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./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>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744310900a4567941.html
评论列表（0条）