无法读取property 'canvas'的定义

Cannot read property 'canvas' of undefined

本文关键字：定义 canvas 读取 property      更新时间：2023-09-26

我正在尝试使用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);
这里的

小提琴

我的解决方案有点不同，因为我想让图表动态变化(在我的应用程序中，它是用滑块移动的)，但避免可怕的闪烁。

在标准实例化之后，我像这样更新滑块拖动:

var chartData = getChartData();
for(var i=0; i<chartData.length; i++)
{
    barChart.datasets[0].bars[i].value = chartData[i];
}
barChart.update();

这很好地显示了变化，但在动画完成后，为了防止当用户将鼠标悬停在上面时发生奇怪的闪烁(工具提示对我来说也是必不可少的)，我在鼠标上销毁并重新创建图表，如下所示:

if(barChart) {
    barChart.clear();
    barChart.destroy();
}
chartDataObject = getChartData();
var chartData = {
    labels: getChartLabels(),
    datasets: [
        {
            label: "label",
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: chartDataObject
        }
    ]
};
var chartContext = $("#visualizeEfficacyBar").get(0).getContext("2d");
barChart = new Chart(chartContext).Bar(chartData, { tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>", responsive : true , animate : false, animationSteps : 1 });

这里重要的是不要动画的娱乐，因为它会导致一个非常尴尬的视觉效果，设置animate : false没有做到这一点，但animationSteps : 1做到了。现在没有闪烁，图表被重新创建，用户也不知道。

相关文章：