データセットをデータ ソースとして使用して、asp.net でグラフを作成しています。縦棒グラフを表示できました。グラフの各列の値を表示する方法にこだわっています。
どうすればこれを行うことができるかについてアドバイスをいただけますか?
データセットをデータ ソースとして使用して、asp.net でグラフを作成しています。縦棒グラフを表示できました。グラフの各列の値を表示する方法にこだわっています。
どうすればこれを行うことができるかについてアドバイスをいただけますか?
.net 4 に標準で付属する ASP.NET チャート コントロールを使用していると仮定しています。取得できる非常に基本的なチャートは、以下のコードです。
<asp:Chart ID="Chart1" runat="server">
<Series>
<asp:Series Name="Series1" ChartType="Pie" Palette="EarthTones" >
<Points>
<asp:DataPoint AxisLabel="Celtics" YValues="17" />
<asp:DataPoint AxisLabel="Lakers" YValues="15" />
<asp:DataPoint AxisLabel="Bulls" YValues="6" />
<asp:DataPoint AxisLabel="Spurs" YValues="4" />
<asp:DataPoint AxisLabel="76ers" YValues="3" />
<asp:DataPoint AxisLabel="Pistons" YValues="3" />
<asp:DataPoint AxisLabel="Warriors" YValues="3" />
</Points>
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1" Area3DStyle-Enable3D="true" />
</ChartAreas>
</asp:Chart>
プログラムでこれにアクセスする場合は、http://weblogs.asp.net/scottgu/archive/2008/11/24/new-asp-net-charting-control-にあるサンプル プロジェクトをダウンロードすることをお勧めします。 lt-asp-chart-runat-quot-server-quot-gt.aspxを開き、サンプル コードを確認します。このプロジェクトは非常に広範で、チャートについて知る必要があるすべてのことについて詳細に説明しています。特定のロジックまたはコードで行き詰まっている場合は、それを投稿していただければ、さらにアドバイスできます
ありがとう。
厳密に言えば..
コードビハインドから:(私のシリーズは全体的に呼び出されます)
series_overal_overall.Label = "#PERCENT{P0}"
これにより、値がパーセントで表示されます
もう少し詳しく説明するには、このサンプルを検討してください。
この禁止されたデータから、私はたくさんのグラフを作成しています。単純にするために、2 つだけ示します。
(申し訳ありませんが、私は 3D 円グラフを使用していますが、何でも構いません)
a) 私の aspx ページ..
<asp:Chart ID="chartOverall" runat="server" Height="200px" Width="1000 px">
<BorderSkin SkinStyle="Emboss" />
<Titles>
<asp:Title Text="Laptop" TextStyle="Shadow" Font="Trebuchet MS, 14pt, style=Bold" IsDockedInsideChartArea="false" DockedToChartArea="laptop" ></asp:Title>
<asp:Title Text="Desktop" TextStyle="Shadow" Font="Trebuchet MS, 14pt, style=Bold" IsDockedInsideChartArea="false" DockedToChartArea="desktop" ></asp:Title>
</Titles>
<Legends>
</Legends>
<ChartAreas>
<asp:ChartArea Name="laptop" Area3DStyle-Enable3D="true" > <Position Y="15" Height="65" Width="22" X="1"></Position></asp:ChartArea>
<asp:ChartArea Name="desktop" Area3DStyle-Enable3D="true" > <Position Y="15" Height="65" Width="22" X="34"></Position></asp:ChartArea>
</ChartAreas>
</asp:Chart>
2 つのラベルを定義し、「ドッキング」するチャートエリアを指定します。残りはコードビハインドから行うため、凡例を 1 つだけ実行します。最後に、グラフ領域自体を定義します。
コードビハインドでは、サブルーチンを呼び出してカートを作成し、上記のようにテーブルへの参照を渡して、計算した日付をその時間まで処理できるようにします。
Protected Sub createchart(ByRef t As Table)
'create series
Dim series_overal_laptop As New Series("Overalll")
Dim series_overal_desktop As New Series("Overalld")
'create arrays
Dim yvalueslaptop(1) As Integer
Dim yvaluesdesktop(1) As Integer
Dim Xvalues(2) As String
Dim Xvaluesio(1) As String
' fill X values
For i = 1 To 2 ' in/out label.
Xvaluesio(i - 1) = t.Rows(2).Cells(i).Text
Next
ここまでで準備作業は完了です。次に、Y 値を入力します。
' fill y values
For i = 1 To 5 Step 2
'laptops IN
YValuesINL(((i + 1) / 2) - 1) = t.Rows(3).Cells(i).Text
'Desktops IN
YValuesIND(((i + 1) / 2) - 1) = t.Rows(4).Cells(i).Text
Next
For i = 2 To 6 Step 2
'laptops out
YValuesOUTL(((i) / 2) - 1) = t.Rows(3).Cells(i).Text
'desktop out
YValuesOUTD(((i) / 2) - 1) = t.Rows(4).Cells(i).Text
Next
基本的に、IN の奇数列と out 値の偶数列をすべて読み取っています。最後の文字は、それがラップトップ (L) またはデスクトップ (D) の値であるかどうかを指定します。次に、保証内/保証外のパーセンテージとして表示したい数値が含まれているため、これらの読み取り値を合計します。(ページの一部のみを表示していることに注意してください。中間配列は別の場所で使用されています)
'overall laptops and desktops
'reuse the values i've collected already
yvalueslaptop(0) = YValuesINL.Sum
yvalueslaptop(1) = YValuesOUTL.Sum
yvaluesdesktop(0) = YValuesIND.Sum
yvaluesdesktop(1) = YValuesOUTD.Sum
'now name and place the series, specfiy appearance and point values
'#First Section
series_overal_laptop.Name = "laptop"
series_overal_laptop.ChartArea = "laptop"
series_overal_laptop.ChartType = SeriesChartType.Pie
series_overal_laptop.Label = "#PERCENT{P0}"
series_overal_laptop.IsVisibleInLegend = False
series_overal_desktop.Name = "desktop"
series_overal_desktop.ChartArea = "desktop"
series_overal_desktop.ChartType = SeriesChartType.Pie
series_overal_desktop.Label = "#PERCENT{P0}"
series_overal_desktop.IsVisibleInLegend = True
series_overal_desktop.LegendText = "#AXISLABEL"
'#End of First Section
チャートの 1 つについては、2 回同じであるため、凡例を隠しています。後で 2 つのチャートの中央に凡例を配置します。
' now bind the datapoints to the series
series_overal_laptop.Points.DataBindXY(Xvaluesio, yvalueslaptop)
series_overal_desktop.Points.DataBindXY(Xvaluesio, yvaluesdesktop)
'finally add the series to the charts
chartOverall.Series.Dispose() ' just to be sure nothing is left behind
chartoverall.series.add(series_overal_laptop)
chartOverall.Series.Add(series_overal_desktop)
chartOverall.Series("laptop").Palette = ChartColorPalette.Excel
chartOverall.Series("desktop").Palette = ChartColorPalette.Excel
ここに私の凡例を追加します。
'only 1 legend per chart is fine as they all have the same colors
Dim topviewlegend As New Legend("topviewlegend")
chartOverall.Legends.Add(topviewlegend)
chartOverall.Series("desktop").Legend = "topviewlegend"
topviewlegend.IsDockedInsideChartArea = False
topviewlegend.Docking = 0
topviewlegend.Position.Auto = False
topviewlegend.Position.X = 20
topviewlegend.Position.Y = 13
topviewlegend.Position.Width = 20
topviewlegend.Position.Height = 10
もちろん、チャートエリアに正しく配置するには、値を少し操作する必要があります
パーセンテージではなく値を表示する場合は、たとえばラベルを に変更します。
series_overal_laptop.Label = "#VALY"
お役に立てれば
K