[ASP.net] Chart - StackedColumn 消除奇怪的提示線
2013-08-28
最近一直在處理一些報表的東西，所以都會用到ASP.net 的 Chart 功能，之前提到 簡單使用 Chart – StackedColumn
因為在測試資料的時候發現有這問題，當值有0的時候會出現奇怪的提示線
看不清楚，那我們放大看一下：
他其實就是提示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="#F2F8F2">
</asp:Series>
<asp:Series ChartType="StackedColumn" Name="Series2" Color="Blue" LegendText="速度" Label="#VAL" LabelForeColor="#F2F8F2">
</asp:Series>
<asp:Series ChartType="StackedColumn" Name="Series3" Color="Red" LegendText="力量" Label="#VAL" LabelForeColor="#F2F8F2">
</asp:Series>
<asp:Series ChartType="StackedColumn" Name="Series4" Color="Brown" LegendText="配合度" Label="#VAL" LabelForeColor="#F2F8F2">
</asp:Series>
<asp:Series ChartType="StackedColumn" Name="Series5" Color="Pink" LegendText="敏捷度" Label="#VAL" LabelForeColor="#F2F8F2">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
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;
}
Chart1.DataSource = data.DefaultView;
}
/// <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;}
其中最重要的就是這一段:
//取掃所有的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;
}
將所有的series 掃描過一次，並且將他的SmartLabelStyle 進行調整
結果：
是不是好看很多 :)