ASP.NET CHART 初體驗
以下以長條圖為例來說明:
★ bar 上面要顯示實際數字
屬性 → Series → 標籤 → IsValueShownAsLabel = true
★ 要設定第二個 Y 軸 (右邊)
屬性 → Series → 要設定的成員 → 軸 → YAxisType = Secondary (預設是 Primary)
★ X 軸的字轉向
屬性→ ChartAreas → 軸 → Axes → X axis → 標籤 → LabelStyle → Angle → 設定字型要轉幾度, ex. 90
or
chart1.ChartAreas["ChartArea1"].AxisX.LabelStyle.Angle = 90; //設成 -90 度時字就是轉另一邊
★ X, Y 軸 設定名稱
屬性→ ChartAreas → 軸 → Axes → 標題 → Title
or
chart1.ChartAreas["ChartArea1"].AxisY2.Title = "交 易 數 量"; //設定 Y2 軸的名稱
★ Y 軸 的 名稱 (title) 轉成正的 (橫向)
屬性→ ChartAreas → 軸 → Axes → 標題 → TextOrientation = Horizontal
★ 當有二個 Y 軸時,將軸線設定成不同的顏色以便區分
chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.LineColor = Color.Green; // 或設成 .FromArgb(150, 150, 150); 亦可
chart1.ChartAreas["ChartArea1"].AxisY2.MajorGrid.LineColor = Color.Blue;
★ 設定 X 軸線不要線 --> 設成 empty 表示不要線,如果設成白色, Y軸的線看起來會像虛線
chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.LineColor = Color.Empty;
★ 當X軸超過 9 個時,label 名稱就會顯示不完全
if (dtTMP.Rows.Count > 9)
{
//設置X軸座標的間隔為1
chart1.ChartAreas["ChartArea1"].AxisX.Interval = 1;
//設置X軸座標偏移為1
chart1.ChartAreas["ChartArea1"].AxisX.IntervalOffset = 1;
//設置是否交錯顯示,比如數據多時分成兩行來顯示
chart1.ChartAreas["ChartArea1"].AxisX.LabelStyle.IsStaggered = true; //如果 X 軸要設成文字轉向,這一行就要 MARK 起來不作交錯顯示
}
★ 將最大值的直條圖設為紅色, 最小值的直條圖設為黑色
--> 就是作顯著標記以方便一眼就看到最大最小值,特別是在各數值的差異不明顯時
chart1.Series[0].Points.FindMaxByValue().Color = System.Drawing.Color.Red;
chart1.Series[0].Points.FindMinByValue().Color = System.Drawing.Color.Black;
★ 長條圖要改成折線圖
屬性 → Series → 圖表 → ChartType = Line
( 設成線的話,要在 外觀 → BorderWidth 設定線的粗細,預設是 1 會因為太細看不清楚 )
★ 把 Series 名稱從預設的右上角移到表格底下
屬性 → Legends → 停駐 → Docking = Bottom , Alignment = center
範例
private void P_LoadChart(DataTable Dt )
{
//Set DataTable as data source to Chart
this.Chart1.DataSource = Dt;
//Mapping a field with x-value of chart
//this.Chart1.Series[0].XName = "xName";
this.Chart1.Series[0].XValueMember = "科別";
Chart1.ChartAreas[0].AxisX.LabelStyle.Angle = 90;
Chart1.ChartAreas[0].AxisX.Interval = 1;
//Mapping a field with y-value of Chart
this.Chart1.Series[0].YValueMembers = "人數";
//Bind the DataTable with Chart
this.Chart1.DataBind();
}