格式化數據以填充谷歌圖表

Question

我正在嘗試使用Google API顯示折線圖。出於同樣的我試圖格式化從ASP.net WEBMETHOD的數據，如

[WebMethod] 
public static List<object> GetChartData() 
{ 
     List<object> chartData = new List<object>(); 

     chartData.Add(new object[] 

     { 
      "DateTime", "Bugs" 
     }); 

     chartData.Add(new object[] 
       { 
        "2011", "12", 
        "2014","45", 
        "2015","40", 
        "2016","98" 
       }); 

     return chartData; 
} 

，這裏是我的客戶端代碼。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", { packages: ["corechart"] }); 
    google.setOnLoadCallback(drawChart); 

    function drawChart() { 

     var options = { 
      title: 'Bug Tracker' 
     }; 

     $.ajax({ 
      type: "POST", 
      url: "WebForm1.aspx/GetChartData", 
      data: '{}', 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (r) { 
       var data = google.visualization.arrayToDataTable(r.d); 
       var chart = new google.visualization.LineChart($("#chart")[0]); 
       chart.draw(data, options); 
      }, 
      failure: function (r) { 
       alert(r.d); 
      }, 
      error: function (r) { 
       alert(r.d); 
      } 
     }); 
    } 

</script> 

在運行上面的代碼我越來越喜歡0x800a139e - JavaScript runtime error: Row 0 has 8 columns, but must have 2錯誤什麼是錯的，如何解決？

Answer 1

後的第一任一列，應該是一些
除非給出了具體的作用，如tooltip

試試這個...

chartData.Add(new object[] {"DateTime", "Bugs"}); 
chartData.Add(new object[] {"2011", 12}); 
chartData.Add(new object[] {"2014", 45}); 
chartData.Add(new object[] {"2015", 40}); 
chartData.Add(new object[] {"2016", 98}); 

或客戶端上，調整代碼評論...

var charData = r.d; 
var data = new google.visualization.DataTable(); 
data.addColumn('string', 'Year'); 
data.addColumn('number', 'Bugs'); 

for (var i = 0; i < charData.length; i++) { 
    data.addRow([charData[i].DateTime, pareseInt(charData[i].Bugs)]); 
} 

編輯

數據如下...
[["DateTime","Bugs"],["2011",12],["2014",45],["2015",40],["2016",98]]

那麼只需要arrayToDataTable創建數據表

看到下面的工作片段...

google.charts.load('current', { 
 
    callback: function() { 
 
    var r = {}; 
 

 
    r.d = [["DateTime","Bugs"],["2011",12],["2014",45],["2015",40],["2016",98]]; 
 

 
    var data = google.visualization.arrayToDataTable(r.d); 
 

 
    var options = { 
 
     title: "Bug Tracker", 
 
     pointSize: 5 
 
    }; 
 

 
    var lineChart = new google.visualization.LineChart(document.getElementById('chart')); 
 
    lineChart.draw(data, options); 
 
    }, 
 
    packages:['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart"></div>

Answer 2

要回答你的問題：

"On running the above code I am getting an error like 0x800a139e - JavaScript runtime error: Row 0 has 8 columns, but must have 2" What is wrong and how to resolve that ?

要添加的整個表和它的讀取行的列數的數量。它期望有8列數據的兩列。打破它這樣的事情，這是如果你正在訪問從類：

數據沒有看到所有的代碼，這是算法類型的樣品，你將需要：

創建一個類你對象的數據：

public class MyData{ 

    public string Year {get; set;} 
    public int Bugs {get; set;} 

    var bugs = new List<MyData>BugList(): 
    // add data. 

獲取的數據與您的Ajax來，將得到的數據的列表，並將其序列化爲JSON格式的方法。

return JsonConvert.SerializeObject(bugs); 

然後，您可以從JavaScript內訪問數據。爲了模塊化，將代碼的圖表部分從C＃數據中分離出來很重要。因此，圖表的詳細信息將添加到創建圖表的位置。

var data = new google.visualization.DataTable(); 
data.addColumn('string', 'Year'); 
data.addColumn('number', 'Bugs'); 
for (var i in chardata) { 
    data.addRow([chardata.Year[i], ints[chardata.Bugs[i]]]); 
} 

作爲一個例子嘗試以下操作：

var str = new string[3] {"2011", "2012", "2013"}; 

var data = new google.visualization.DataTable(); 
data.addColumn('string', 'Year'); 
data.addColumn('number', 'Bugs'); 
for (var i in str) { 
    data.addRow([str[i], ints[i]]); 
} 

測試它簡單的東西就是這樣，然後通過AJAX訪問您的數據。