我正在尝试使用 chartsjs 制作饼图。我已按照 chartjs 文档中的步骤进行操作，并且包含了 chart.js 和 canvas 元素。我添加了应该创建图表的脚本，作为 chartjs 文档中提供的示例。我收到以下错误: 未捕获的类型错误:无法读取未定义的属性“ Canvas ” 有谁知道如何解决这个问题？我究竟做错了什么？ 提前致谢!
这是代码:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="<?php echo base_url(); ?>media/js/chart.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>media/js/jquery.js"></script>
</head>
<canvas id="myChart" width="400" height="400"></canvas>
<script type="text/javascript">
$(function() {
options = {
//Boolean - Show a backdrop to the scale label
scaleShowLabelBackdrop: true,
//String - The colour of the label backdrop
scaleBackdropColor: "rgba(255,255,255,0.75)",
// Boolean - Whether the scale should begin at zero
scaleBeginAtZero: true,
//Number - The backdrop padding above & below the label in pixels
scaleBackdropPaddingY: 2,
//Number - The backdrop padding to the side of the label in pixels
scaleBackdropPaddingX: 2,
//Boolean - Show line for each value in the scale
scaleShowLine: true,
//Boolean - Stroke a line around each segment in the chart
segmentShowStroke: true,
//String - The colour of the stroke on each segement.
segmentStrokeColor: "#fff",
//Number - The width of the stroke value in pixels
segmentStrokeWidth: 2,
//Number - Amount of animation steps
animationSteps: 100,
//String - Animation easing effect.
animationEasing: "easeOutBounce",
//Boolean - Whether to animate the rotation of the chart
animateRotate: true,
//Boolean - Whether to animate scaling the chart from the centre
animateScale: false,
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
};
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"
}
];
ctx = $("#myChart").get(0).getContext("2d");
myNewChart = new Chart(ctx[0]).Pie(data, options);
});
</script>
</html>
最佳答案
问题出在这行:
myNewChart = new Chart(ctx[0]).Pie(data, options);
特别是 ctx[0]。当您在此处定义 ctx 时:
ctx = $("#myChart").get(0).getContext("2d");
ctx 是一个名为 CanvasRenderingContext2D 的对象，它具有属性。当它不是时，您试图将其视为数组。 ctx[0] 因此是 undefined。因此，正如您所发现的，解决方案实际上很简单。
将 ctx[0] 更改为 ctx，您就得到了漂亮的动画饼图。
ctx = $("#myChart").get(0).getContext("2d");
myNewChart = new Chart(ctx).Pie(data, options);
关于javascript - 无法读取未定义的属性 'canvas'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25404241/