Question

我必须在我的项目中使用谷歌图表。我必须实现c＃和asp .net这样做，但我也尝试过java脚本，但输出不是我想要的。任何人都可以帮我这个吗？

Answer 1

是的，您可以使用C＃：

来使用Google Chart

 string strCon2=ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;

 SqlConnection con2 = new SqlConnection(strCon2);

 SqlDataAdapter da = new SqlDataAdapter("SELECT result,date_time FROM read_master  WHERE user_id =" + Session["user_id"]+"ORDER BY date_time ASC", con2);

 DataTable dt = new DataTable();
 try
 {

     da.Fill(dt);

     //data.addColumn('string'(datatype), 'Year'(columnname according to the sql table));
     //data.addColumn('number'(datatype), 'Sales'(columnname according to the sql table));
     //data.addColumn('date'(datatype), 'Date'(columnname according to the sql table));

     str.Append(@"<script type=text/javascript> google.load( *visualization*, *1*, {packages:[*corechart*]});  //You can replace "corechart" to any other package of Google charts like For "Google Table" use "table"

     google.setOnLoadCallback(drawLineChart);
     function drawLineChart() {
         var data = new google.visualization.DataTable();

         data.addColumn('date', 'Date Time');
         data.addColumn('number', 'Result');

         data.addRows(" + dt.Rows.Count + ");");

         Int32 i=0;
         //here i am using for loop to fetch multiple recorod from the database

         for (i = 0; i <= dt.Rows.Count - 1; i++)
         {

             str.Append("data.setValue(" + i + "," + 1 + "," + dt.Rows[i]["result"].ToString() + ");");

             DateTime cDate = DateTime.ParseExact(dt.Rows[i]["date_time"].ToString(), "dd-MM-yyyy tt hh:mm:ss", CultureInfo.InvariantCulture);

             str.Append(" data.setValue(" + i + "," + 0 + ",new Date(" + cDate.Year.ToString() + "," + (cDate.Month-1).ToString() + "," + cDate.Day.ToString() + "," + cDate.Hour.ToString() + "," + cDate.Minute.ToString() + "," + cDate.Second.ToString() + "));");
         }

         // To display LineChart in your project use "google.visualization.'LineChart'". 
         // And to display PieChart or Google DataTable, change to
         // "google.visualization.'Piechart'" or "'google.visualization.'Table'" accordingly.

         str.Append("   var chart = new google.visualization.LineChart(document.getElementById('LineChartDiv'));");
         // in the below line you can set width height of the chart according to your need
         str.Append(" chart.draw(data, {width: 1200, height: 500, title: 'Your Glucodata',");
         //  str.Append(" var chart = new google.visualization.BarChart(document.getElementById('chart_div'));");
         str.Append("vAxis: {title: 'Result', titleTextStyle: {color: 'green'}}");
         str.Append(",hAxis: {format: 'dd MMM,yyyy'}");
         str.Append("}); }");
         str.Append("</script>");
         ltLineChart.Text = str.ToString().TrimEnd(',').Replace('*', '"');
         con2.Close();
     }

Answer 2

要使用谷歌图表，您需要使用ajax调用从数据中获取数据并将其绑定到aspx文件中

Answer 3

这里有很多很棒的教程：

http://code.google.com/intl/es-ES/apis/chart/

它真的充满了如何使谷歌图表工作的代码。实际上，您需要做的是使用数据来动态创建数据以调用API。

让我们看一下Google-Charts的例子：

<html>
  <head>
    <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 data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addRows([
          ['2004', 1000, 400],
          ['2005', 1170, 460],
          ['2006', 660, 1120],
          ['2007', 1030, 540]
        ]);

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

有了这个，您只需使用带有ASP / C＃/ ...的For循环来创建data.addRows()

中的数据

如果我们正在处理C＃，我建议使用这个： http://code.google.com/p/googlechartsharp/

这里有一个基本的例子：

using GoogleChartSharp;

int[] data = new int[] { 0, 10, 20, 30, 40 };
LineChart chart = new LineChart(150, 150);
chart.SetData(data);
string url = chart.GetUrl();

然而，正如您所做的那样坚持如何提供数据，我担心您将创建自己的算法来提供数据（您只需要用您想要的值填充向量）

将数据表绑定到谷歌图表

3 个答案: