[ASP.net] 簡單使用 Chart - StackedColumn
2013-08-14
最近因為案子會用到，先簡單筆記一下，一般的Colum 的Bar Chart 已經很方便了，但是資料多的時候，或是一個指標內部含有的數值分布，這時候會用到 StackedColumn 來表示，舉例像是超級英雄中我們會希望他有一個總分表，但是這總分鐘各數值的分布可能是會有參考指標的，有其資料量大的時候，我們來看一下例子，假設下方Stark的綜合分數為265 但是中我們知道他的速度是168所以占的分數是最高的。
接下來，我們來討論怎麼實作
首先來看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>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
再來看看我們怎麼在C#這邊將資料匯入:
var 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 = "力量";//加入這一行免得都擠在一起Chart1.ChartAreas["ChartArea1"].AxisX.Interval = 1;dt.Rows.Add(new object[] { "Stark", new Random(Guid.NewGuid().GetHashCode()).Next(0, 200),
new Random(Guid.NewGuid().GetHashCode()).Next(0, 200), new Random(Guid.NewGuid().GetHashCode()).Next(0, 200) });dt.Rows.Add(new object[] { "Hulk", new Random(Guid.NewGuid().GetHashCode()).Next(0, 200),
new Random(Guid.NewGuid().GetHashCode()).Next(0, 200), new Random(Guid.NewGuid().GetHashCode()).Next(0, 200) });dt.Rows.Add(new object[] { "Black Widow", new Random(Guid.NewGuid().GetHashCode()).Next(0, 200),
new Random(Guid.NewGuid().GetHashCode()).Next(0, 200), new Random(Guid.NewGuid().GetHashCode()).Next(0, 200) });dt.Rows.Add(new object[] { "Thor", new Random(Guid.NewGuid().GetHashCode()).Next(0, 200),
new Random(Guid.NewGuid().GetHashCode()).Next(0, 200), new Random(Guid.NewGuid().GetHashCode()).Next(0, 200) });Chart1.DataSource = dt.DefaultView;
很簡單做個紀錄，不多加解釋，其中數字我都是用亂數去跑的。