[ASP.net] Chart - StackedColumn 將數值為0的隱藏顯示
2013-08-28
之前我們在其他圖形有提到過將0的數值隱藏的問題 Column圖改變 Points 上標 Label 文字樣式
但是我在 StackedColumn上面似乎有點問題，後來發現是因為團入資料的方式
上篇文章（StackedColumn 消除奇怪的提示線）我們成功將提示線給消除了，這篇文章我們將0的數值給拿掉
移除後：
ASPX Code :
<asp:Chart ID="Chart1" runat="server">
<Legends>
<asp:Legend Alignment="Center" Docking="Bottom" Name="Legend1">
</asp:Legend>
</Legends>
<Series>
<asp:Series ChartType="StackedColumn" Name="Series1" Color="#1BA31D" LegendText="智力" Label="#VAL" LabelForeColor="Black">
</asp:Series>
<asp:Series ChartType="StackedColumn" Name="Series2" Color="Blue" LegendText="速度" Label="#VAL" LabelForeColor="Black">
</asp:Series>
<asp:Series ChartType="StackedColumn" Name="Series3" Color="Red" LegendText="力量" Label="#VAL" LabelForeColor="Black">
</asp:Series>
<asp:Series ChartType="StackedColumn" Name="Series4" Color="Brown" LegendText="配合度" Label="#VAL" LabelForeColor="Black">
</asp:Series>
<asp:Series ChartType="StackedColumn" Name="Series5" Color="Pink" LegendText="敏捷度" Label="#VAL" LabelForeColor="Black">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="BindData" />
</div>
C# Code :
protected void Button1_Click(object sender, EventArgs e)
{ Chart1.Series[0].XValueMember = "英雄"; Chart1.Series[0].YValueMembers = "智力"; Chart1.Series[1].YValueMembers = "速度"; Chart1.Series[2].YValueMembers = "力量"; Chart1.Series[3].YValueMembers = "配合度"; Chart1.Series[4].YValueMembers = "敏捷度"; //加入這一行免得都擠在一起 Chart1.ChartAreas["ChartArea1"].AxisX.Interval = 1;var data = GetTestDatable();
//取掃所有的Series 將其SmartLabelStyle更改樣式foreach (var series in Chart1.Series)
{series.SmartLabelStyle.CalloutStyle = LabelCalloutStyle.None;
series.SmartLabelStyle.CalloutLineAnchorCapStyle = LineAnchorCapStyle.None;
series.SmartLabelStyle.CalloutLineColor = Color.Transparent;
series.SmartLabelStyle.CalloutLineWidth = 0;
}
//因為要調整 Points 所以就不能直接用DataSource進行Binding. //Chart1.DataSource = data.DefaultView;Chart1.Series[0].Points.DataBindXY(data.DefaultView, "英雄", data.DefaultView, "智力");
Chart1.Series[1].Points.DataBindXY(data.DefaultView, "英雄", data.DefaultView, "速度");
Chart1.Series[2].Points.DataBindXY(data.DefaultView, "英雄", data.DefaultView, "力量");
Chart1.Series[3].Points.DataBindXY(data.DefaultView, "英雄", data.DefaultView, "配合度");
Chart1.Series[4].Points.DataBindXY(data.DefaultView, "英雄", data.DefaultView, "敏捷度");
//將 Point 數值 0給拿掉foreach (var point in from series in Chart1.Series from point in series.Points from t in point.YValues where t == 0 select point)
{ point.Label = string.Empty;}
}
/// <summary> /// 傳出假資料 /// </summary> /// <returns></returns> private DataTable GetTestDatable() { var dt = new DataTable(); dt.Columns.Add("英雄"); dt.Columns.Add("智力"); dt.Columns.Add("速度"); dt.Columns.Add("力量"); dt.Columns.Add("配合度"); dt.Columns.Add("敏捷度");dt.Rows.Add(new object[] { "Stark", new Random(Guid.NewGuid().GetHashCode()).Next(0, 10),
new Random(Guid.NewGuid().GetHashCode()).Next(0, 20), new Random(Guid.NewGuid().GetHashCode()).Next(0, 10) , new Random(Guid.NewGuid().GetHashCode()).Next(0, 20), new Random(Guid.NewGuid().GetHashCode()).Next(0, 10)});dt.Rows.Add(new object[] { "Hulk", new Random(Guid.NewGuid().GetHashCode()).Next(0, 10),
new Random(Guid.NewGuid().GetHashCode()).Next(0, 20), new Random(Guid.NewGuid().GetHashCode()).Next(0, 10) , new Random(Guid.NewGuid().GetHashCode()).Next(0, 20), new Random(Guid.NewGuid().GetHashCode()).Next(0, 10)});dt.Rows.Add(new object[] { "Black Widow", new Random(Guid.NewGuid().GetHashCode()).Next(0, 10),
0,
0,
new Random(Guid.NewGuid().GetHashCode()).Next(0, 20), new Random(Guid.NewGuid().GetHashCode()).Next(0, 10)});dt.Rows.Add(new object[] { "Thor", new Random(Guid.NewGuid().GetHashCode()).Next(0, 10),
new Random(Guid.NewGuid().GetHashCode()).Next(0, 20), new Random(Guid.NewGuid().GetHashCode()).Next(0, 10) , new Random(Guid.NewGuid().GetHashCode()).Next(0, 20), new Random(Guid.NewGuid().GetHashCode()).Next(0, 10)}); return dt;}
其中重點在兩個地方
1 . 原本我都是很偷懶的方法直接使用 Chart1.DataSource = data.DefaultView;
但是，這樣的作法，我在掃描Series 中的Point 時候都一直沒資料 所以Binding 的方法改成
//因為要調整 Points 所以就不能直接用DataSource進行Binding.//Chart1.DataSource = data.DefaultView;Chart1.Series[0].Points.DataBindXY(data.DefaultView, "英雄", data.DefaultView, "智力");
Chart1.Series[1].Points.DataBindXY(data.DefaultView, "英雄", data.DefaultView, "速度");
Chart1.Series[2].Points.DataBindXY(data.DefaultView, "英雄", data.DefaultView, "力量");
Chart1.Series[3].Points.DataBindXY(data.DefaultView, "英雄", data.DefaultView, "配合度");
Chart1.Series[4].Points.DataBindXY(data.DefaultView, "英雄", data.DefaultView, "敏捷度");
2.之後就進行掃描，如果當值為0 就將其label 設空
//將 Point 數值 0給拿掉foreach (var point in from series in Chart1.Series from point in series.Points from t in point.YValues where t == 0 select point)
{ point.Label = string.Empty;}
結果：
這樣圖形又比原本的更為清楚