可以看得出,圖表里橫縱坐標的數據都是靜態的幾個數據,因此我們只要從數據庫讀取出我們想要的橫縱坐標值,然后動態賦給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("]}]");
