2012-01-12 37 views
1

我剛開始使用高圖,我需要從它上面的sql server數據庫呈現值。Highcharts與SQL服務器數據

請問,使用asp.net作爲服務器端語言來完成此操作的最佳方法是什麼?

在此先感謝 感謝您的迴應傢伙,我正在取得一些進展。然而,從數據庫動態獲取xAxis類別證明是困難的。這是我的下面

DataSet dsSeries = new DataSet(); 
     public string hidValues1; 
     public string hidXCategories1; 
     protected void Page_Load(object sender, EventArgs e) 
     { 

      if (!IsPostBack) 

      dsSeries=BindData(); 

      if (dsSeries == null) return; 

      foreach (DataRow dr in dsSeries.Tables[0].Rows) 
      { 
       hidXCategories1=hidXCategories1+ dr["symbol"].ToString()+","; 

      } 

      foreach (DataRow dr1 in dsSeries.Tables[0].Rows) 
      { 
       hidValues1=hidValues1+dr1["value"].ToString()+","; 

      } 


     } 

     public DataSet BindData() 
     { 
      string connString = ConfigurationManager.ConnectionStrings["Chartdata"].ToString(); 
      SqlConnection con = new SqlConnection(connString); 
      SqlCommand cmd = new SqlCommand(); 
      cmd.Connection = con; 
      cmd.CommandText = "SELECT symbol,value FROM Ticker"; 
      SqlDataAdapter da = new SqlDataAdapter(cmd); 
      try 
      { 
       DataSet ds = new DataSet(); 
       da.Fill(ds); 
       return ds; 

      } 
      catch (Exception ex) 
      { 
       throw ex; 
      } 
     } 
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script> 
     <script type="text/javascript" src="Scripts/highcharts.js"></script> 
     <script type="text/javascript" src="Scripts/exporting.js"></script> 
     <script type="text/javascript"> 

      var firstSeries = '<%=hidValues1 %>'; 
      var xAxis = '<%=hidXCategories1 %>'; 
      var banksname; 
      var seriesOne = new Array(); 
      seriesOne = firstSeries.split(','); 
      for (var i = 0; i < seriesOne.length; i++) { 

       seriesOne[i] = parseInt(seriesOne[i]); 
      } 
      var xAxisSeries = new Array(); 
      xAxisSeries = xAxis.split(','); 
      for (var i = 0; i < xAxisSeries.length; i++) { 

       banksname =banksname+ seriesTwo[i]; 

      } 


      var _MyArray = seriesOne; 
      var _MyArray2 = banksname; 
      $(document).ready(function() { 
       chart = new Highcharts.Chart({ 
        chart: { 
         renderTo: 'container', 
         defaultSeriesType: 'line' 
        }, 
        title: { 
         text: 'Fruit Consumption' 
        }, 
        xAxis: { 
         categories:[_MyArray2] 
        }, 
        yAxis: { 
         title: { 
          text: 'Fruit eaten' 
         } 
        }, 
        series: [{ 
         name:'Share Price', 
         data:_MyArray 
        }] 


       }); 
       $('tspan').last().remove(); 
      }); 
</script> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div> 

的Y軸數據填充並正確呈現圖表上的代碼,然而X軸類別仍然顯示在附圖(這是在數據庫表中的類別的數列表。

+2

此問題可能會廣泛得到任何有用的答案,但從highcharts的角度來看 - 一旦數據是在網頁的JavaScript數組中,那麼所有好。 – eolsson 2012-01-12 13:39:52

回答

5

DotNet.Highcharts讓您輕鬆構建在服務器站點上的Highcharts沒有任何JavaScript代碼的可能性下面是如何創建你在你的ASP.NET應用程序中圖表代碼:

Highcharts chart = new Highcharts("chart") 
      .SetTitle(new Title { Text = "Fruit Consumption" }) 
      .SetXAxis(new XAxis { Categories = _MyArray2 }) 
      .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Fruit eaten" } }) 
      .SetSeries(new Series { Name = "Share Price", Data = new Data(_MyArray) }); 

欲瞭解更多示例去這裏:http://dotnethighcharts.codeplex.com/releases/view/80650

1

Highcharts.Net是另一種選擇,你可以考慮將Highcharts集成到您的ASP .Net網站。事實上,您所面臨的確切問題已經被討論(並解決了)here

0

var firstSeries ='<%= hidValues1%>'; var xAxis ='<%= hidXCategories1%>'; here hidValues1 和hidXCategories是表的列名? 「上調試其顯示錯誤當前上下文hidvalues1未找到..