2015-07-29 13 views
6

की संपत्ति 'लेबल' नहीं पढ़ सकता है, मैं बस सीख रहा हूं कि chart.js कैसे काम करता है इसलिए मैंने चार्ट.जेएस एपीआई पेज से सीधे उदाहरण कोड का उपयोग किया है और यह काम नहीं कर रहा है। मैं स्क्रिप्ट टैग में निम्न कोड रखता हूं और मुझे "अपरिभाषित" त्रुटि का "संपत्ति नहीं पढ़ा जा सकता है" लेबल मिलता है। सुनिश्चित नहीं है कि इस त्रुटि का अर्थ क्या हैअपरिभाषित

$(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>" 
       }; 
      }); 

उत्तर

3

मुझे मेरी त्रुटि मिली! किसी भी डेटा या विकल्पों की घोषणा करने से पहले रडार का निर्माण कोड के शीर्ष पर आता है।

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

इस लाइन समारोह के तल पर रखा जाना चाहिए

$(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); 
     }); 
संबंधित मुद्दे