Javascript 无法读取属性'；帆布'；未定义的_Javascript_Jquery_Canvas_Charts_Undefined

Javascript 无法读取属性'；帆布'；未定义的

javascript jquery canvas charts

Javascript 无法读取属性'；帆布'；未定义的,javascript,jquery,canvas,charts,undefined,Javascript,Jquery,Canvas,Charts,Undefined,我正在尝试使用chartsjs制作饼图。我遵循了chartjs文档中的步骤，包括了chart.js和canvas元素。我添加了创建图表的脚本，如chartjs文档中提供的示例。我得到以下错误：未捕获的TypeError:无法读取未定义的属性“canvas” 有人知道如何解决这个问题吗？我做错了什么？先走一步代码如下： <!DOCTYPE html> <html> <head> <script type="text/javas

我正在尝试使用chartsjs制作饼图。我遵循了chartjs文档中的步骤，包括了chart.js和canvas元素。我添加了创建图表的脚本，如chartjs文档中提供的示例。我得到以下错误：未捕获的TypeError:无法读取未定义的属性“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
的对象，它具有属性。您正试图将其视为一个数组，但它不是<因此，code>ctx[0]

未定义。因此，正如您所发现的，解决方案实际上很简单

将

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();

var chartData=getChartData（）；
对于（var i=0；我发现了它；显然它只是ctx而不是ctx[0]图表（ctx）。Pie（数据，选项）；非常感谢。我觉得很愚蠢，这太明显了，我没有看到它。我感到羞耻。这种混乱源于chartjs文档。饼图的示例使用了新图表（ctx[0]）。Pie（数据，选项）；
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 });