[ASP.net] 關於ASP.net Chart- Column圖改變 Points 上標 Label 文字樣式
2013-06-26
上一篇說到關於Radar 圖的一些有的沒的，這一篇分享一下碰到Column Chart 上面老闆的要求
首先一樣先拉入一張Chart 並且設定為Column圖
設定一些Series 其中我建立的範例LegendText 為 能力、智力、速度三種
其中的Label 為 #VAL
看一下ASPX Code :
<asp:Chart ID="Chart1" runat="server">
<Legends>
<asp:Legend Alignment="Center" Docking="Bottom" Name="Legend1">
</asp:Legend>
</Legends>
<Series>
<asp:Series Name="Series1" LegendText="能力" Label="#VAL"></asp:Series>
<asp:Series ChartArea="ChartArea1" LegendText="智力" Name="Series2" Label="#VAL">
</asp:Series>
<asp:Series ChartArea="ChartArea1" LegendText="速度" Name="Series3" Label="#VAL">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1"></asp:ChartArea>
</ChartAreas>
</asp:Chart>
再來就是C# Code 這邊匯入資料
C#:
DataTable dt = new DataTable();dt.Columns.Add("英雄名稱");dt.Columns.Add("能力");dt.Columns.Add("智力");dt.Columns.Add("速度");Chart1.Series[0].XValueMember = "英雄名稱";Chart1.Series[0].YValueMembers = "能力";Chart1.Series[1].YValueMembers = "智力";Chart1.Series[2].YValueMembers = "速度";dt.Rows.Add(new object[] { "浩克", 5, 5, 0 });
dt.Rows.Add(new object[] { "鋼鐵人", 5, 5, 2 });
dt.Rows.Add(new object[] { "美國隊長", 5, 1, 4 });
Chart1.DataSource = dt.DefaultView;
Chart1.DataBind();
這時候來看一下結果..
這時候老闆需求是 因為高分的5 希望是紅色顯示其上標數字 ， 並且 0 分的就是不要出現其上標數字
查了一下做法，因為這是必須獨立去設定每一個分數上面的上標文字
所以在 Databind 之後加上這段Code.
C#:
foreach (var series in Chart1.Series)
{foreach (var point in series.Points)
{ if (point.YValues[0] == 0) { point.Label = string.Empty;}
else if (point.YValues[0] >= 5)
{point.LabelForeColor = Color.Red;
}
}
}
結果:
一些很簡單的小技巧，給需要用到的人自己也筆記一下