So erstellen Sie eine Variable in JavaScript aus zwei anderen Variablen - Erstellen Sie ein Diagramm mit chartnew.js

Question

Ich möchte ein gestapeltes Diagramm mit chartnew.js in Aspx-Seite anzeigen. Ich habe alle relevanten Daten von webmethods erhalten. Die Daten für das Diagramm sind im Format

var classdata = { 
        labels: ["English", "French", "Science", "Maths", "SS", "IT","Computer","Arts"], 
        datasets: [ 

         { 
          data: [3, 3, 2, 7, 1, 3, 4, 9], 
          fillColor: "#B1CD4F", 
          title: "EXCELLENT" 
         }, { 
          data: [5, 2, 10, 4, 2, 8, 4, 2], 
          fillColor: "#4663EA", 
          title: "FAIR" 
         }, { 
          data: [6, 5, 4, 4, 0, 7, 4, 2], 
          fillColor: "#B812E0", 
          title: "GOOD" 
         }, { 
          data: [0, 0, 3, 0, 0, 1, 0, 1], 
          fillColor: "#4173D1", 
          title: "NEEDS IMPROVEMENT" 
         }, { 
          data: [2, 0, 2, 0, 1, 1, 1, 2], 
          fillColor: "#55E949", 
          title: "SATISFACTORY" 
         }, { 
          data: [7, 6, 2, 8, 3, 3, 10, 7], 
          fillColor: "#4DD1E7", 
          title: "VERY GOOD" 
         }] 
       } 

Ich habe alle diese Daten von zwei Webmethoden. Ich habe es in zwei getrennten Variablen genommen. Das sind die Beschriftungswerte für eine Variable namens "Datalables" und die Dataset-Werte für die Variable "Data".

Jetzt möchte ich diese beiden Variablen kombinieren und die Daten für das Diagramm erstellen. Ich habe versucht wie folgt, aber es funktioniert nicht, dh das Diagramm wird nicht angezeigt.

var classdata = {labels: [datalabels], datasets: [data] };

Wie kann ich kombinieren diese beiden Variablen, um das Diagramm zu machen? Jemand bitte helfen.

Der vollständige Code ist hier.

function LoadClassChart() { 
     $.ajax({ 
      type: "POST", 
      url: "Home.aspx/GetClassChart", 
      data: JSON.stringify({ Grade: $('select[id$=BatchDropDownList1]').val(), Term: $('select[id$=TermDropDownList1]').val() }), 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (r) { 
       $(".classdivstyle").css("backgroundImage", "url(/Images/back.png)"); 

       var data; 
       try { 
        data = r.d; 
       } 
       catch (e) { 
        if (e instanceof SyntaxError) { 
         alert(e.message); 
        } 
        else { 
         throw (e); 
        } 
       } 
       var el = document.getElementById("<%= classcanvas.ClientID %>"); 
       var ctx = el.getContext('2d'); 

       var classdata = { 
        labels: [datalabels], 
        datasets: [data] 
       }; 

       var newopts = { 
        inGraphDataShow: true, 
        inGraphDataFontColor: 'white', 
        inGraphDataFontSize: 14, 
        inGraphDataFontStyle: 'bold', 
        highLight: true, 
        highLightSet: { fillColor: "red", inGraphDataFontColor: "black", inGraphDataFontSize: 18 }, 
        highLightFullLine: true, 
        datasetFill: true, 
        scaleFontSize: 16, 
        canvasBorders: true, 
        graphTitle: $('select[id$=TermDropDownList1]').val() + " Performance", 
        graphTitleFontFamily: "'Segoe UI'", 
        graphTitleFontSize: 22, 
        graphTitleFontColor: "#666", 
        graphSubTitle: "Class Teacher : ", 
        legend: true, 
        yAxisLabel: "Students", 
        xAxisLabel: "Subjects", 
        yAxisUnit: "Nos.", 
        annotateDisplay: true, 
        dynamicDisplay: true 
       } 
       $(".classdivstyle").css("backgroundImage", "none"); 
       var myBarChart = new Chart(ctx).StackedBar(classdata, newopts); 
      }, 
      failure: function (response) { 
       alert('There was an error in loading chart.'); 
      } 
     }); 
    } 

Answer 1

eckigen Klammern in classdata variable entfernen, wie

var classdata = { folgt Labels: datalabels, Datensätze: data };

Ich rate Datalabels und Daten werden als Arrays zurückgegeben.