讀取數據庫數據並在HighCharts上顯示


可以看得出,圖表里橫縱坐標的數據都是靜態的幾個數據,因此我們只要從數據庫讀取出我們想要的橫縱坐標值,然后動態賦給Chart就行了。

 

 

X軸:

     xAxis: {                     categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日' ], //X軸的坐標值                     title: {text: '周數'},  //X軸坐標標題                 }

 

Y軸:

     yAxis: {                     title: {text: '人數(人)'},  //Y軸坐標標題
                }

 

主標題:

     title: { text: '圖表主標題' }, //圖表主標題

副標題:

     subtitle: {text: '圖表子標題' }, //圖表副標題

 

Y軸數據:

     series:[{ name: '人數', data: [20, 40, 30, 90, 100, 60, 50] }]

 

 

這些值我們都可以從數據庫獲得數據,然后動態綁定上去即可,這里后台代碼中最常用的是StringBuilder,通過它來拼湊出要綁定的數據

 

 

X軸:

     xAxis: {                     categories: <%= XAxisCategories %> , //X軸的坐標值                     title: <%=Xtitle %> ,  //X軸坐標標題                 }

 

Y軸:

     yAxis: {                     title:<%=Ytitle %> ,  //Y軸坐標標題                 }

 

主標題:

     title: <%=title %> , //圖表主標題

副標題:

     subtitle: <%=subtitle %> , //圖表副標題

 

Y軸數據:

     series:<%= seriesData.ToString() %>

 

下面給出獲取X軸、Y軸、標題的方法:

 

    public string XAxisCategories = ""; //X軸     public StringBuilder seriesData = new StringBuilder(); //Y軸     public string title = ""; // 圖表標題

    ...

  標題獲取

 

  title = "{text: '" + "<font color=red>"+site_name +"</font>"+"'}";  //紅色標記的部分是從數據庫動態獲取的,怎么獲取,該獲取什么,根據你需要,你應該懂的

 

X軸獲取:

 

StringBuilder xAxisCategories = new StringBuilder();

xAxisCategories.Append("[");

...

foreach (DataRowView drv in ds.Tables[0].DefaultView)

{      xAxisCategories.Append("'");      xAxisCategories.Append(drv["周數"] == null ? "0" : drv["周數"].ToString());      xAxisCategories.Append("',");

}

XAxisCategories = xAxisCategories.Replace(",", "", xAxisCategories.Length - 1, 1).Append("]").ToString(); //這里是去掉最后一個多余的逗號(,)

 

Y軸獲取:

 

StringBuilder yAxisCategories = new StringBuilder();

...

foreach (DataRowView drv in ds.Tables[0].DefaultView)

{      yAxisCategories.Append(drv["人數"] == null ? "0" : drv["人數"].ToString());      yAxisCategories.Append(",");

}

seriesData.Append("[{name: '人數',type: 'spline',data: ["); seriesData.Append(yAxisCategories.Replace(",", "", yAxisCategories.Length - 1, 1)); //去除最后一個逗號(,) seriesData.Append("]}]");

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM