web-dev-qa-db-de.com

Die Eigenschaft 'canvas' von undefined kann nicht gelesen werden

Ich versuche, chartsjs zu verwenden, um ein Kreisdiagramm zu erstellen. Ich habe die Schritte in der chartjs-Dokumentation befolgt und chart.js und das Canvas-Element eingefügt. Ich fügte das Skript hinzu, das das Diagramm erstellen soll, als Beispiel in der Dokumentation von chartjs. Ich erhalte die folgende Fehlermeldung: Uncught TypeError: Eigenschaft 'canvas' von undefined Kann nicht gelesen werden. Weiß jemand, wie man das beheben kann? Was mache ich falsch? Danke im Voraus!

HIER IS DER CODE:

<!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>
javascriptjquerycanvaschartsundefined
10
Unfinished

Das Problem liegt hier auf dieser Linie:

myNewChart = new Chart(ctx[0]).Pie(data, options);

Und speziell in ctx[0]. Wenn Sie hier ctx definiert haben:

ctx = $("#myChart").get(0).getContext("2d");

ctx ist ein Objekt namens CanvasRenderingContext2D, das Eigenschaften besitzt. Sie versuchen, es als Array zu behandeln, wenn dies nicht der Fall ist. ctx[0] ist daher undefined. Die Lösung ist also eigentlich einfach, wie Sie herausgefunden haben. 

Ändern Sie ctx[0] in ctx, und Sie haben Ihr animiertes Kreisdiagramm von Nice.

ctx = $("#myChart").get(0).getContext("2d");
myNewChart = new Chart(ctx).Pie(data, options);

Fiddle hier

24
Spencer Wieczorek

Meine Lösung ist etwas anders, da ich wollte, dass sich das Diagramm dynamisch ändert (in meiner Anwendung bewegt es sich mit einem Schieberegler), vermeiden Sie jedoch das schreckliche Flackern. 

Nach der Standardinstanziierung aktualisiere ich den Schieberegler wie folgt:

var chartData = getChartData();

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

barChart.update();

Dies animiert die Änderung schön, aber nachdem die Animation abgeschlossen ist, um das seltsame Flackern zu verhindern, wenn der Benutzer den Mauszeiger darüber bewegt (der Tooltip ist auch für mich unerlässlich), zerstöre ich das Diagramm beim Hochfahren wie folgt :

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

Das Wichtigste dabei ist, die Erholung nicht zu animieren, da dies zu einem sehr umständlichen visuellen Effekt führt. Die Einstellung von animate : false hat nicht den Trick ausgeführt, animationSteps : 1 jedoch. Jetzt kein Flackern, das Diagramm wird neu erstellt und der Benutzer ist nicht klüger. 

0
Frank Conry