Cannot read property 'canvas' undefined

Ich versuche, mit chartsjs, um ein Kreisdiagramm. Ich folgte den Schritten in der chartjs Dokumentation und ich habe chart.js und das canvas-element. ich habe das Skript, sollte das Diagramm erstellen, wie das Beispiel in der chartjs Dokumentation. Ich erhalte die folgende Fehlermeldung:
Uncaught TypeError: Cannot read property 'canvas' undefined
Tut anywhone wissen, wie man dieses Problem beheben? Was mache ich falsch?
Danke im Voraus!

HIER IST 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>
post code plz...
Ich habe den code gepostet
gefunden; Anscheinend nur seine ctx nicht ctx[0] Diagramm(ctx).Pie(data, options);

InformationsquelleAutor Unfinished | 2014-08-20

  1. 24

    Das problem liegt an dieser Zeile hier:

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

    Und in speziell ctx[0]. Wenn Sie den vorgegebenen ctx hier:

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

    ctx ist ein Objekt namens CanvasRenderingContext2D, die besitzenden Eigenschaften. Sie versuchen, Sie zu behandeln, als ein Array wenn es nicht ist. ctx[0] ist daher undefined. Also die Lösung ist eigentlich einfach, da Sie herausgefunden haben.

    Ändern ctx[0] zu ctx, und Sie haben Ihre schöne animierte Kreisdiagramm.

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

    Geige

    Vielen Dank. Ich fühle mich dumm, das war so offensichtlich und ich habe es nicht gesehen. Schande über mich.
    Die Verwirrung entsteht, von der chartjs Dokumentation. Das Beispiel für das Kreisdiagramm verwendet neue Diagramm(ctx[0]).Pie(data,options); chartjs.org/docs/#doughnut-pie-chart

    InformationsquelleAutor Spencer Wieczorek

  2. 0

    Meine Lösung ist etwas anders, als ich wollte, um das Diagramm dynamisch ändern (in meiner Anwendung, es bewegt sich mit einem Schieberegler), aber vermeiden Sie die schreckliche flackern.

    Nach standard der Instanziierung ich ein update auf Schieberegler ziehen, etwa so:

    var chartData = getChartData();

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

barChart.update();

    Dieser animiert teh ändern schön, aber nachdem die animation fertig ist, um das seltsame flackern passiert, wenn der Benutzer schwebt mit der Maus über (der tooltip ist auch wichtig für mich), Zerstöre ich, und erstellen Sie das Diagramm auf der Maus 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 });

    Die wichtige Sache hier ist nicht zu animieren, die Freizeit verursachen, dies führt zu einem sehr ungeschickten visuellen Effekt festlegen animate : false nicht den trick tun, aber animationSteps : 1 haben. Jetzt kein flackern, das Diagramm wird neu erstellt und der Benutzer wird nicht klüger.

    InformationsquelleAutor Frank Conry

Schreibe einen Kommentar