2014-01-26 3 views
2

asp.net을 사용하여 아래 코드에서 생성 된 것과 유사한 차트를 생성합니다. 각 범례 항목은 세 줄을 차지하지만, 심볼이 수직으로 내가 생각하는, 중앙 정렬 주의 불분명 같습니다asp 만들기 : 차트 범례 기호 수직 정렬

Chart legend with vertically central alignment

그것의 첫 번째 줄에 나란히 앉아 있도록 가능한 수직 기호를 정렬하는 것입니다 텍스트 (예 : 첫 번째 파란색 선은 "Some name - 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

에 액세스하는 것입니다. 오 예! 매력처럼 작동합니다. 고맙습니다. 이 대답을 복사하여 붙여 넣기를 희망하는 사람에게'Imports System.Drawing'이 필요하거나'ContentAlignment.TopCenter'를'Drawing.ContentAlignment.TopCenter'로 변경하십시오. – EvilDr

+1

@EvilDr import =와 함께 답을 업데이트했습니다. –

+0

이것은 Chart.CustomizeLegend' 이벤트에서만 할 수 있거나, DataBinding 후에'Legend'에 접근 할 수 있습니까? 명확성을 위해서 ...! – EvilDr

0

는 당신이 바로 당신의 코멘트에 분명했다, 내 이전 대답을 삭제.

다시 시도 할 수 있습니까? 이것에 대해서 : 선이 행의 중앙에 놓여 졌기 때문에, 전설의 시작 부분에 3 개의 빈 줄이 어떨까요? 이렇게하면 "Some name"옆에 줄이 나타납니다.

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

아니, 두려운 것처럼 작동하지 않아. ASP.NET은 범례를 표로 렌더링 한 다음 렌더링하기 전에 내용을 정렬합니다. 필요한 것은 테이블 (또는 무엇이든) 속성 또는 범례 기호의 세로 맞춤 속성 – EvilDr