2つの変数から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" 
         }] 
       } 

です。これらのデータは2つのWebメソッドから取得しました。私は2つの別々の変数でそれをとった。これはラベル値を "datalables"という変数に、データセット値を "data"という名前の変数にラベル付けしたものです。

今私は、これら2つの変数を組み合わせて、グラフのデータを作成したいです。私は次のようにしようとしましたが、グラフが表示されていません。私は、チャートを作成するには、これらの2つの変数を組み合わせることができますどのように

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

するvar classdata = { ラベル：datalabels、 データセット：データ }を次のようにclassdata変数に角括弧を取り除きます。

私はデータラベルを推測しており、データは配列として返されています。