Impossible de lire la propriété 'canvas' de undefined

Je suis en train d'utiliser chartsjs de faire un graphique à secteurs. J'ai suivi les étapes de la chartjs de la documentation et j'ai compris chart.js et l'élément canvas. j'ai ajouté le script qui devrait créer le graphique de l'exemple fourni dans le chartjs de la documentation. J'obtiens l'erreur suivante:
Uncaught TypeError: Cannot read property 'toile' undefined
Ne anywhone savoir comment résoudre ce problème? Ce que je fais mal?
Merci à l'avance!

VOICI LE 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>

source d'informationauteur Unfinished

  1. 24

    Le problème se situe sur cette ligne ici:

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

    Et en particulier ctx[0]. Lorsque vous avez défini ctx ici:

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

    ctx est un objet appelé CanvasRenderingContext2Dles riches propriétés. Vous êtes à essayer de la traiter comme une Tableau quand il ne l'est pas. ctx[0] est donc undefined. Donc la solution est en fait simple, comme vous l'avez trouvé.

    Changement ctx[0] à ctxet vous avez votre belle animation graphique.

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

    Violon Ici

  2. 0

    Ma solution est un peu différent, que je voulais avoir le tableau de changer dynamiquement (dans mon application, il se déplace avec un curseur), mais éviter le terrible scintillement.

    Après la norme de l'instanciation, je l'ai mise à jour sur le curseur, faites glisser comme suit:

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

    Cette anime teh changement bien, mais une fois l'animation terminée, afin de garder l'étrange scintillement de passe lorsque l'utilisateur place le pointeur de la souris sur (l'info-bulle est également essentiel pour moi), je la détruire et recréer le tableau de la souris vers le haut comme suit:

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

    La chose importante ici est de ne pas animer les loisirs cause, elle conduit à une très maladroit effet visuel, réglage animate : false n'a pas fait le tour, mais animationSteps : 1 fait. Maintenant, pas de scintillement, le graphique est recréé et l'utilisateur n'est pas plus sage.