2014-01-26 16 views
2

我正在使用asp.net生成一個圖表,該圖表與下面的代碼生成的圖表類似。 請注意,每個圖例項佔用三條線,但符號是垂直居中對齊,這我覺得看起來不清楚:如何使asp:圖表圖例符號垂直對齊

Chart legend with vertically central alignment

是否可以垂直對齊的符號,使其就位於旁邊的第一線文本(例如,第一條藍線應位於「某個名稱-1」旁邊)?或者,可以配置某種分離器嗎?無論哪種方式,我寧願垂直對齊,但兩個選項一起會很好。

完整的示例代碼:

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load 
    Dim chart1 As New Chart 
    Page.Controls.Add(chart1) 
    chart1.ChartAreas.Add(New ChartArea) 
    Dim l As New Legend 
    chart1.Legends.Add(l) 
    Dim dt As New DataTable 
    dt.Columns.Add(New DataColumn With {.ColumnName = "ColA", .DataType = GetType(System.String)}) 
    dt.Columns.Add(New DataColumn With {.ColumnName = "ColB", .DataType = GetType(System.Int32)}) 
    dt.Columns.Add(New DataColumn With {.ColumnName = "ColC", .DataType = GetType(System.Int32)}) 
    dt.Columns.Add(New DataColumn With {.ColumnName = "ColD", .DataType = GetType(System.Int32)}) 
    Dim rnd As New Random 
    For i As Integer = 1 To 5 
     Dim dr As DataRow = dt.NewRow 
     dr.Item("ColA") = String.Format("{0} {1}", "Some name - ", i.ToString) 
     dr.Item("ColB") = rnd.Next(0, 100) 
     dr.Item("ColC") = rnd.Next(0, 100) 
     dr.Item("ColD") = rnd.Next(0, 100) 
     dt.Rows.Add(dr) 
    Next 
    Dim gv As New GridView 
    Page.Form.Controls.Add(gv) 
    gv.DataSource = dt 
    gv.DataBind() 
    For Each dr As DataRow In dt.Rows 
     Dim s As New Series 
     s.Name = dr.Item("ColA").ToString 
     s.ChartType = SeriesChartType.Line 
     s.LegendText = s.Name & Environment.NewLine & "Line 2" & Environment.NewLine & "Line 3" 
     chart1.Series.Add(s) 
     For i As Integer = 1 To dt.Columns.Count - 1 
      Dim p As New DataPoint 
      p.SetValueY(Convert.ToInt32(dr.Item(i))) 
      p.AxisLabel = dt.Columns(i).ColumnName 
      Trace.Warn(dt.Columns(i).ColumnName & " = " & Convert.ToInt32(dr.Item(i)).ToString) 
      s.Points.Add(p) 
     Next 
    Next 
    chart1.DataBind() 
End Sub 
+1

不完全是一個答案,但你嘗試過每一個圖例項後加入空行?那應該看起來更清楚了。 – nothrow

+0

謝謝Yossarian。是的,我試過了。它看起來更好,但當圖表中有很多數據時,可以大大擴展圖例的大小。謝謝,雖然;一個有價值的貢獻 – EvilDr

回答

3

可以使用Chart.CustomizeLegend event定製圖例項目的排列和分隔符:

Imports System.Drawing 

Protected Sub Chart_CustomizeLegend(sender As Object, e As CustomizeLegendEventArgs) 
    For Each item As LegendItem In e.LegendItems 
     ' Align the series symbol. 
     item.Cells(0).Alignment = ContentAlignment.TopCenter 

     ' Add a separator. 
     item.SeparatorType = LegendSeparatorStyle.Line 
     item.SeparatorColor = Color.LightGray 
    Next 
End Sub 

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load 
    Dim chart1 As New Chart 

    ' Bind to the CustomizeLegend event. 
    AddHandler chart1.CustomizeLegend, AddressOf Chart_CustomizeLegend 

    Page.Controls.Add(chart1) 
    chart1.ChartAreas.Add(New ChartArea) 
    Dim l As New Legend 

    ' ... The rest of your code... 
End Sub 
+0

Ohhh yes!奇蹟般有效。謝謝。對於任何希望複製和粘貼此答案的人來說,您需要'Imports System.Drawing'或將ContentAlignment.TopCenter更改爲'Drawing.ContentAlignment.TopCenter' – EvilDr

+1

@EvilDr更新了導入的答案=) –

+0

這是隻能在'Chart.CustomizeLegend'事件中做,或者可以在DataBinding之後訪問'Legend'嗎?只是爲了清楚...! – EvilDr

0

刪除我以前的答案,你就在您的評論明顯。

我可以再試一次嗎?那麼怎麼樣:因爲這條線被放置在該行的中間,那麼圖例開頭的三條空行怎麼樣?這樣該行將顯示在「某個名稱」旁邊。

s.LegendText = Environment.NewLine & Environment.NewLine & Environment.NewLine & s.Name & Environment.NewLine & "Line 2" & Environment.NewLine & "Line 3" 
+0

不,它不會像我所害怕的那樣工作。 ASP.NET將圖例呈現爲表格(我相信)然後在呈現之前對齊內容。我需要的是訪問表格(或其他)屬性,或者圖例符號的垂直對齊屬性 – EvilDr