如何在asp.net中使用amcharts api繪製動態的基於json的圖表？

我是Kaushik。如何在asp.net中使用amcharts api繪製動態的基於json的圖表？

我想在asp.net網頁上使用amcharts圖表api生成一個列類型圖表，例如「display.aspx」。要求是圖表以「json」數據的形式獲取數據並繪製圖形。我的要求是從sql server檢索數據，然後將這些數據生成到json中，然後用生成的json數據填充圖表。我也是這樣做的。但是，我沒有成功，因爲當我在Visual Studio中運行網站時，網頁上沒有顯示任何圖表。在這裏，我有兩個代碼文件：JSONData.aspx和JSONData.aspx.cs

這是我有的JSONData.aspx頁面。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JSONData.aspx.cs" Inherits="New_DataQuest.JSONData" %> 
 

 
<!DOCTYPE html> 
 

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head runat="server"> 
 
    <title></title> 
 
    <script src="jquery-2.1.1.min.js" type="text/javascript"></script> 
 
    <script src="amcharts/amcharts.js" type="text/javascript"></script> 
 
    <script src="amcharts/serial.js" type="text/javascript"></script> 
 
    <%--<script type="text/javascript"> 
 
     $('Button1').click(function() { 
 
      $.ajax({ 
 
       type: "POST", 
 
       url: "/JSONData.aspx.cs/GetJsonData", 
 
       data: "[]", 
 
       contentType: "application/json;chartset=utf-8", 
 
       dataType: "json", 
 
       async: true, 
 
       cache: false, 
 
      }); 
 
      return false; 
 
     }); 
 
    </script>--%> 
 
    <script type="text/javascript"> 
 
     // code to draw the chart in javascript as given in the website "http://www.amcharts.com/tutorials/your-first-chart-with-amcharts/" 
 
     $(AmCharts).ready(function() { 
 
      var chart = new AmCharts.AmSerialChart(); 
 
      var j = '<%=GetJsonData()%>';//this statement should get the json data from code behind page to the variable "j" 
 
      chart.dataProvider = j;//the json data in the var j is given to the data provider. 
 
      chart.categoryField = "subject"; 
 

 
      var graph = new AmCharts.AmGraph(); 
 
      graph.valueField = "marks"; 
 
      graph.type = "column"; 
 
      chart.addGraph(graph); 
 
      //var categoryAxis = chart.categoryAxis; 
 
      //categoryAxis.autoGridCount = false; 
 
      //categoryAxis.gridCount = chart.dataProvider.length; 
 
      //categoryAxis.gridPosition = "start"; 
 
      //categoryAxis.labelRotation = 90; 
 
      //graph.fillAlphas = 0.2; 
 
      chart.write('chartdiv'); 
 
     }); 
 
    </script> 
 
    <%--This code is to check whether the json data from the code behind file is getting generated or not. --%> 
 
    <%--<script> 
 
     var js = '<%=jsondata%>'; 
 
     $(document).ready(function() { 
 
      alert(js); 
 
     }); 
 
    </script>--%> 
 
</head> 
 
<body> 
 
    <form id="form1" runat="server"> 
 
    <div> 
 
     <asp:Button ID="Button1" runat="server" Text="Show JSON data" OnClick="Button1_Click" /> 
 
     <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Draw Chart" /> 
 
     <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager> 
 
     <div id="chartdiv" style="width:1300px;height:500px"></div> 
 
    </div> 
 
    </form> 
 
</body> 
 
</html>

這裏，是第二頁，文件JSONData.aspx.cs後面的代碼

using System; 
 
using System.Collections.Generic; 
 
using System.Linq; 
 
using System.Web; 
 
using System.Web.UI; 
 
using System.Web.UI.HtmlControls; 
 
using System.Web.UI.WebControls; 
 
using System.Web.UI.WebControls.WebParts; 
 
using System.Data.SqlClient; 
 
using System.Data.Sql; 
 
using System.Text; 
 
using System.Web.Services; 
 

 
namespace New_DataQuest 
 
{ 
 
    public partial class JSONData : System.Web.UI.Page 
 
    { 
 

 
     public string jsondata = GetJsonData(); 
 
     protected void Page_Load(object sender, EventArgs e) 
 
     { 
 
      
 
     } 
 
     [WebMethod]//webmethod for a static getjsondata function so that the method can be accessed using jquery in aspx page. 
 
     public static string GetJsonData() 
 
     { 
 
      //sql connection 
 
      SqlConnection con = new SqlConnection(); 
 
      con.ConnectionString = "Initial Catalog=asti;Data Source=KAUSHIK;user ID=sa;password=kaushik1993"; 
 
      string query = "select [Subject Name], [Total] from [asti_data] where [Year]='1' and [Student ID]='11M91A0527'"; 
 
      con.Open(); 
 
      SqlCommand cmd = new SqlCommand(query, con); 
 
      SqlDataReader dr; 
 
      dr = cmd.ExecuteReader(); 
 

 
      //create a JSON string to describe the data from the database 
 
      
 
      StringBuilder JSON = new StringBuilder(); 
 
      string prefix = ""; 
 
      JSON.Append("["); 
 
      while(dr.Read()) 
 
      { 
 
       JSON.Append(prefix+"{"); 
 
       JSON.Append("\"subject\":"+"\""+dr[0]+"\","); 
 
       JSON.Append("\"marks\":" + dr[1]); 
 
       JSON.Append("}"); 
 
       prefix = ","; 
 
      } 
 
      JSON.Append("]"); 
 
      
 
      return JSON.ToString(); 
 
     } 
 

 
     protected void Button1_Click(object sender, EventArgs e) 
 
     { 
 
      //Response.Write(jsondata); 
 
      
 
     } 
 

 
     protected void Button2_Click(object sender, EventArgs e) 
 
     { 
 
      
 
     } 
 
     
 
    } 
 
}

這裏是我想附上的示例數據庫圖片。訪問此鏈接以獲取圖片。「https://drive.google.com/file/d/0B-JER42be41TSGJmVVV3bXJEcEk/view?usp=sharing」

主要目標是從數據庫中生成數據並將其轉換爲JSON數據並使用此JSON數據填充圖表的「dataProvider」屬性/方法以繪製圖表。基本上，x軸將包含主題，而y軸將包含學生確保的標記。

現在，我想知道在編碼部分實際出現了什麼問題。我會非常感謝那些會分享寶貴時間回答這個問題的人。非常感謝。

來源

2015-02-05 kaushik awala

那麼這是數據請求問題還是amCharts問題？我無法調試它，所以你可以發佈產生的JSON嗎？ – gerric 2015-02-09 08:22:13

yup ..這是生成的JSON .. @gerric – 2015-02-11 16:33:44

[{「subject」：「ENGLISH」，「marks」：82}，{「subject」：「MATHEMATICS - I」，「marks」：59}，{ 「主題」：「工程物理」，「標記」：70}，{「主題」：「工程化學」，「標記」：76}，{「主題」：「計算機編程和數據結構」，「標記」 82}，{「主題」：「數學方法」，「標記」：71}，{「主題」：「工程製圖」，「標記」：68}，{「主題」：「計算機編程實驗室」「標記」：73}，{「主題」：「英語語言溝通技能實驗室」，「標記」：72}，{「主題」主題「：」IT WORKSHOP＆ENGINEERING WORKSHOP「，」marks「：69}] – 2015-02-11 16:34:40

嘗試解析您的JSON數據，有點像，

chart.dataProvider = JSON.parse(j);

這可能是爲你工作。

來源

2016-03-25 10:15:46

如何在asp.net中使用amcharts api繪製動態的基於json的圖表？

回答

相關問題