如何設置Stacked =「true」柱形圖telerik

Question

我有一個柱形圖，所以我想繪製最後一列顯示堆積值的值。

我正在使用RadHtmlChart Telerik，但在最後一列設置參數tacked =「true」，但結果錯了圖表沒有堆積，如果我在第一行系列中設置此屬性，圖表堆疊。這是我的代碼：

<telerik:RadHtmlChart ID="Chart" runat="server" Width="680" Height="500"> 
           <PlotArea> 
            <XAxis> 
             <LabelsAppearance> 
              <TextStyle Color="white" FontFamily="Arial" FontSize="13" /> 
             </LabelsAppearance> 
            </XAxis> 
            <YAxis Step="5000000" MinValue="0" > 
             <LabelsAppearance DataFormatString="${0:0,0}"> 
              <TextStyle Color="white" FontFamily="Arial" FontSize="12" /> 
             </LabelsAppearance> 
            </YAxis> 
            <Series> 
             <telerik:ColumnSeries Name="Garantías Vigentes"> 
              <LabelsAppearance Position="Center" DataFormatString="${0:0,0}" > 
               <TextStyle Color="Black" FontFamily="Arial" Bold="True" FontSize="18" /> 
              </LabelsAppearance> 
              <Appearance> 
               <FillStyle BackgroundColor="#87cb50"></FillStyle> 
              </Appearance> 
              <SeriesItems> 
              </SeriesItems> 
             </telerik:ColumnSeries> 
             <telerik:ColumnSeries Name="Saldo Vigente" Stacked="true"> 
              <LabelsAppearance Position="Center" DataFormatString="${0:0,0}"> 
               <TextStyle Color="Black" FontFamily="Arial" Bold="True" FontSize="18" /> 
              </LabelsAppearance> 
              <Appearance> 
               <FillStyle BackgroundColor="#8DB4E2"></FillStyle> 
              </Appearance> 
              <SeriesItems> 
              </SeriesItems> 
             </telerik:ColumnSeries> 
             <telerik:ColumnSeries Name="" Stacked="true"> 
              <LabelsAppearance Position="Center" DataFormatString="${0:0,0}"> 
               <TextStyle Color="Black" FontFamily="Arial" Bold="True" FontSize="18" /> 
              </LabelsAppearance> 
              <Appearance> 
               <FillStyle BackgroundColor="#8DB4E2"></FillStyle> 
              </Appearance> 
              <SeriesItems> 
              </SeriesItems> 
             </telerik:ColumnSeries> 
            </Series> 
           </PlotArea> 
           <Legend> 
            <Appearance Position="Bottom"><TextStyle Color="white" FontFamily="Arial" FontSize="20" Bold="True"/></Appearance> 
           </Legend> 
    </telerik:RadHtmlChart> 

感謝您的評論

Answer 1

閱讀，以瞭解如何使用該功能：http://www.telerik.com/help/aspnet-ajax/htmlchart-stacked-series.html。

閱讀此處以瞭解如何在最後一個系列中獲得總數：http://www.telerik.com/forums/need-to-display-grand-total-on-top-of-the-htmlchart-stacked-bars。

Answer 2

最後，我設置屬性堆疊=在最後一列真實的，我的代碼：

<telerik:RadHtmlChart ID="Chart" runat="server" Width="680" Height="500"> 
           <PlotArea> 
            <XAxis> 
             <LabelsAppearance> 
              <TextStyle Color="white" FontFamily="Arial" FontSize="13" /> 
             </LabelsAppearance> 
            </XAxis> 
            <YAxis MinValue="0" > 
             <LabelsAppearance DataFormatString="${0:0,0}"> 
              <TextStyle Color="white" FontFamily="Arial" FontSize="12" /> 
             </LabelsAppearance> 
            </YAxis> 

             <Series> 
             <telerik:ColumnSeries Name="Garantías Vigentes" Stacked="true"> 

              <LabelsAppearance Position="Center" DataFormatString="${0:0,0}"> 
               <TextStyle Color="Black" FontFamily="Arial" Bold="True" FontSize="18" /> 
              </LabelsAppearance> 
              <Appearance> 
               <FillStyle BackgroundColor="#87cb50"></FillStyle> 
              </Appearance> 
              <SeriesItems> 

              </SeriesItems> 
             </telerik:ColumnSeries> 
            </Series> 

            <Series>       
             <telerik:ColumnSeries Name="Saldo Vigente" Stacked="true"> 
              <LabelsAppearance Position="Center" DataFormatString="${0:0,0}"> 
               <TextStyle Color="Black" FontFamily="Arial" Bold="True" FontSize="18" /> 
              </LabelsAppearance> 
              <Appearance> 
               <FillStyle BackgroundColor="#8DB4E2"></FillStyle> 
              </Appearance> 
              <SeriesItems> 
               <telerik:CategorySeriesItem Y="0"></telerik:CategorySeriesItem> 
              </SeriesItems> 
             </telerik:ColumnSeries> 

             <telerik:ColumnSeries Name="" > 
              <LabelsAppearance Position="Center" DataFormatString="${0:0,0}"> 
               <TextStyle Color="Black" FontFamily="Arial" Bold="True" FontSize="0" /> 
              </LabelsAppearance> 
              <Appearance> 
               <FillStyle BackgroundColor="#1B1A1A"></FillStyle> 
              </Appearance> 
              <SeriesItems> 
               <telerik:CategorySeriesItem Y="0"></telerik:CategorySeriesItem> 
              </SeriesItems> 
             </telerik:ColumnSeries> 
            </Series> 
           </PlotArea> 
           <Legend> 
            <Appearance Position="Bottom"><TextStyle Color="white" FontFamily="Arial" FontSize="20" Bold="True"/></Appearance> 
           </Legend> 
     </telerik:RadHtmlChart> 

的部分代碼隱藏：

Public Sub LoadChart() 
    Dim salesAuto As Double 
    Dim lessVig As Double 

    lessVig = LtlSaldoVigente.Text.ToDouble 
    salesAuto = CDbl(LtlLine.Text.ToDouble - lessVig * 1000000) 
    Chart.PlotArea.YAxis.MinorGridLines.Visible = False 
    Chart.PlotArea.XAxis.MinorGridLines.Visible = False 


    Dim ColumnSeries1 As ColumnSeries = TryCast(Chart.PlotArea.Series(0), ColumnSeries) 
    ColumnSeries1.SeriesItems.Add(y:=CDec(LtlValue.Text.ToDouble)) 
    ColumnSeries1.SeriesItems.Add(y:=CDec(0)) 

    Dim ColumnSeries2 As ColumnSeries = TryCast(Chart.PlotArea.Series(1), ColumnSeries) 
    ColumnSeries2.Stacked = True 
    ColumnSeries2.SeriesItems.Add(y:=CDec(LtlSaVig.Text.ToDouble * 1000000)) 

    Dim ColumnSeries3 As ColumnSeries = TryCast(Chart.PlotArea.Series(2), ColumnSeries) 
    ColumnSeries3.SeriesItems.Add(y:=CDec(lessVig)) 
End Sub 

結果：