无法使用 Chart.js 初始化饼图
Cannot initialize a pie chart with Chart.js
我正在复制 Chart.js 中的示例,但我不知道我犯的错误是什么。
这是我的代码(取自示例):
<canvas id="myChart" width="400" height="400"></canvas>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js" charset="utf-8"></script>
<script type="text/javascript">
// Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx[0]).Pie(data);
var data = [{
value: 300,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Red"
}, {
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
}, {
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}]
</script>
这段代码给我一个错误:
Uncaught TypeError: Cannot read property 'canvas' of undefined
现在,如果我将 myNewChart
变量更改为:
var myNewChart = new Chart(ctx).Pie(data);
没有错误,也没有图表。
我错过了什么?我觉得这很明显...
谢谢
问题出在这里
var myNewChart = new Chart(ctx[0]).Pie(data);
ctx[0]
未定义。
使用这个:
var myNewChart = new Chart(ctx).Pie(data);
您的代码有两个问题。
首先,您在 data
传递给 Chart()
后将属性分配给 data
,因此饼图将显示为空,因为您没有传递任何数据。
其次,.getContext('2d')
不是 return 数组,而是单个渲染上下文(或 null)。所以 ctx[0]
未定义。
按如下方式修改您的代码,它应该可以工作。
var ctx = document.getElementById("myChart").getContext("2d");
var data = [{
value: 300,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Red"
}, {
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
}, {
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}];
var myNewChart = new Chart(ctx).Pie(data);
我正在复制 Chart.js 中的示例,但我不知道我犯的错误是什么。
这是我的代码(取自示例):
<canvas id="myChart" width="400" height="400"></canvas>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js" charset="utf-8"></script>
<script type="text/javascript">
// Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx[0]).Pie(data);
var data = [{
value: 300,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Red"
}, {
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
}, {
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}]
</script>
这段代码给我一个错误:
Uncaught TypeError: Cannot read property 'canvas' of undefined
现在,如果我将 myNewChart
变量更改为:
var myNewChart = new Chart(ctx).Pie(data);
没有错误,也没有图表。
我错过了什么?我觉得这很明显...
谢谢
问题出在这里
var myNewChart = new Chart(ctx[0]).Pie(data);
ctx[0]
未定义。
使用这个:
var myNewChart = new Chart(ctx).Pie(data);
您的代码有两个问题。
首先,您在 data
传递给 Chart()
后将属性分配给 data
,因此饼图将显示为空,因为您没有传递任何数据。
其次,.getContext('2d')
不是 return 数组,而是单个渲染上下文(或 null)。所以 ctx[0]
未定义。
按如下方式修改您的代码,它应该可以工作。
var ctx = document.getElementById("myChart").getContext("2d");
var data = [{
value: 300,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Red"
}, {
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
}, {
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}];
var myNewChart = new Chart(ctx).Pie(data);