将数据传递到代码背后的谷歌图表

时间:2015-02-21 12:24:38

标签: javascript c# asp.net

我是一个新手,我正在ASP.net上开发一个项目,需要谷歌图表API来生成一些图表,当我在谷歌图表中使用静态数据时,一切都很顺利,问题是我想传递从代码隐藏的数据页面(.cs页面)我该怎么做

//这是我的脚本代码

var res;
   function GetCityValue() {
       PageMethods.GetCity("USA", onSucceeded, onFailed);
     }
       function onSucceeded(result)
       {

         res=result; 
       }
       function onFailed(error)
       {
           return 0;
       }




   // Google chart API

       // Load the Visualization API and the piechart package.
       google.load('visualization', '1.0', { 'packages': ['corechart'] });

       // Set a callback to run when the Google Visualization API is loaded.
       google.setOnLoadCallback(drawChart);


       // Callback that creates and populates a data table, 
       // instantiates the pie chart, passes in the data and
       // draws it.
       function drawChart() {

           // Create the data table.
           var data = new google.visualization.DataTable();
           data.addColumn('string', 'Topping');
           data.addColumn('number', 'Slices');

           GetCityValue();

           data.addRows([
    ['Mushrooms', res],
    ['Onions', 1],
    ['Olives', 1],
    ['Zucchini', 1],
    ['Pepperoni', 2]
  ]);

           // Set chart options
           var options = { 'title': 'How Much Pizza I Ate Last Night',
               'width': 400,
               'height': 300
           };

           // Instantiate and draw our chart, passing in some options.
           var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
           chart.draw(data, options);
       }

我的HTML代码

<form id="form1" runat="server">
   <div>

   </div>
   <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
  </asp:ScriptManager>
  <div id="chart_div" style="width:400; height:300"></div> 
  </form>

这是我的Code Behind Page(.cs页面) 我认为没有必要显示我的.CS代码,但这里是代码

  namespace pageMethodsAndWebMethods
 {
   public partial class jscript : System.Web.UI.Page
   {
       protected void Page_Load(object sender, EventArgs e)
       {

       }
    [System.Web.Services.WebMethod()]
    public static int GetCity(String strCountry)
    {
        int strCity = 0;
        if (strCountry == "USA")
            strCity = 2;
        else
            strCity = 1;
        return strCity;
    }

}

}

1 个答案:

答案 0 :(得分:0)

从后面的代码将数据传递到谷歌图表,我们必须更改我们的代码,你应该创建一个网络方法

如何更改代码以及如何创建Web方法...只需检查以下链接,它对我来说工作正常 http://www.c-sharpcorner.com/UploadFile/4d9083/how-to-create-google-charts-in-Asp-Net-with-json879/