2015-07-29 17 views
6

Właśnie uczę się, jak działa chart.js, więc użyłem kodu przykładowego bezpośrednio poza stroną API wykresu.js i wydaje się, że nie działa. Umieszczam następujący kod w znaczniku script i otrzymuję komunikat "Can not read property" of undefined "error. Nie wiem, co ten błąd oznaczaNie można odczytać właściwości 'etykiety' nieokreślonej

$(function() { 
       var ctx = $('#myCanv').get(0).getContext("2d"); 
       var myRadarChart = new Chart(ctx).Radar(data, options); 
       var data = { 
        labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"], 
        datasets: [ 
         { 
          label: "My First dataset", 
          fillColor: "rgba(220,220,220,0.2)", 
          strokeColor: "rgba(220,220,220,1)", 
          pointColor: "rgba(220,220,220,1)", 
          pointStrokeColor: "#fff", 
          pointHighlightFill: "#fff", 
          pointHighlightStroke: "rgba(220,220,220,1)", 
          data: [65, 59, 90, 81, 56, 55, 40] 
         }, 
         { 
          label: "My Second dataset", 
          fillColor: "rgba(151,187,205,0.2)", 
          strokeColor: "rgba(151,187,205,1)", 
          pointColor: "rgba(151,187,205,1)", 
          pointStrokeColor: "#fff", 
          pointHighlightFill: "#fff", 
          pointHighlightStroke: "rgba(151,187,205,1)", 
          data: [28, 48, 40, 19, 96, 27, 100] 
         } 
        ] 
       }; 
       var options = { 
        //Boolean - Whether to show lines for each scale point 
        scaleShowLine: true, 
        //Boolean - Whether we show the angle lines out of the radar 
        angleShowLineOut: true, 
        //Boolean - Whether to show labels on the scale 
        scaleShowLabels: false, 
        // Boolean - Whether the scale should begin at zero 
        scaleBeginAtZero: true, 
        //String - Colour of the angle line 
        angleLineColor: "rgba(0,0,0,.1)", 
        //Number - Pixel width of the angle line 
        angleLineWidth: 1, 
        //String - Point label font declaration 
        pointLabelFontFamily: "'Arial'", 
        //String - Point label font weight 
        pointLabelFontStyle: "normal", 
        //Number - Point label font size in pixels 
        pointLabelFontSize: 10, 
        //String - Point label font colour 
        pointLabelFontColor: "#666", 
        //Boolean - Whether to show a dot for each point 
        pointDot: true, 
        //Number - Radius of each point dot in pixels 
        pointDotRadius: 3, 
        //Number - Pixel width of point dot stroke 
        pointDotStrokeWidth: 1, 
        //Number - amount extra to add to the radius to cater for hit detection outside the drawn point 
        pointHitDetectionRadius: 20, 
        //Boolean - Whether to show a stroke for datasets 
        datasetStroke: true, 
        //Number - Pixel width of dataset stroke 
        datasetStrokeWidth: 2, 
        //Boolean - Whether to fill the dataset with a colour 
        datasetFill: true, 
        //String - A legend template 
        legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>" 
       }; 
      }); 

Odpowiedz

3

Znalazłem błąd! Stworzenie radaru pojawia się na górze kodu, zanim zadeklaruję dowolne dane lub opcje.

var myRadarChart = new Chart(ctx).Radar(data, options); 

Linia ta musi być umieszczony na końcu funkcji

$(function() { 
      var ctx = $('#myCanv').get(0).getContext("2d"); 
      var data = { 
       labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"], 
       datasets: [ 
        { 
         label: "My First dataset", 
         fillColor: "rgba(220,220,220,0.2)", 
         strokeColor: "rgba(220,220,220,1)", 
         pointColor: "rgba(220,220,220,1)", 
         pointStrokeColor: "#fff", 
         pointHighlightFill: "#fff", 
         pointHighlightStroke: "rgba(220,220,220,1)", 
         data: [65, 59, 90, 81, 56, 55, 40] 
        }, 
        { 
         label: "My Second dataset", 
         fillColor: "rgba(151,187,205,0.2)", 
         strokeColor: "rgba(151,187,205,1)", 
         pointColor: "rgba(151,187,205,1)", 
         pointStrokeColor: "#fff", 
         pointHighlightFill: "#fff", 
         pointHighlightStroke: "rgba(151,187,205,1)", 
         data: [28, 48, 40, 19, 96, 27, 100] 
        } 
       ] 
      }; 
     var myRadarChart = new Chart(ctx).Radar(data, options); 
     }); 
Powiązane problemy