如何使用其他兩個變量在JavaScript中創建變量 - 使用chartnew.js創建圖表

Question

我想在aspx頁面中使用chartnew.js顯示堆積圖表。我從webmethods獲得了所有相關數據。圖表的數據格式爲

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" 
         }] 
       } 

我從兩個webmethods中獲取了所有這些數據。我把它分成兩個獨立的變量。這是將標籤值賦給名爲「datalables」的變量，將數據集賦值給名爲「data」的變量。

現在我想結合這兩個變量併爲圖表創建數據。我嘗試了以下，但它不工作，即圖表不顯示。

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

我如何結合這兩個變量來使圖表？有人請幫忙。

完整的代碼在這裏。

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

除去classdata可變方括號如下

變種classdata = { 標籤：datalabels， 數據集：數據 };

我猜數據標籤和數據是作爲數組返回的。