带有堆积列和两个Y轴的图形

Question

我想创建一个带有多列的图表，包括一些堆叠的并且也有2个Y轴。

当所有列都使用主要的y轴时，它们并排显示。

但是当一个（或多个但不是全部）使用第二个y轴时，它会堆叠每个轴上的所有列，而不是并排显示它们。

我怎样才能让列并排显示，但也有两个y轴显示。我已经在下面包含了我的演示页面代码。

ASPX：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %> 

<%@ Register TagPrefix="asp" Namespace="System.Web.UI.DataVisualization.Charting" 
    Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %> 

<asp:chart id="Chart1" runat="server" height="400px" width="800px"> 
    <Titles> 
     <asp:Title ShadowOffset="3" Name="Development capacity" /> 
    </Titles> 
    <Legends> 
     <asp:Legend Alignment="Center" Docking="Bottom" IsTextAutoFit="False" Name="Development backlog (in days)" 
      LegendStyle="Row" /> 
     <asp:Legend Alignment="Center" Docking="Bottom" IsTextAutoFit="False" Name="Development days completed" 
      LegendStyle="Row" /> 
     <asp:Legend Alignment="Center" Docking="Bottom" IsTextAutoFit="False" Name="Development capacity (in days)" 
      LegendStyle="Row" /> 
     <asp:Legend Alignment="Center" Docking="Bottom" IsTextAutoFit="False" Name="New days scheduled (rolling av.)" 
      LegendStyle="Row" /> 
    </Legends> 
    <Series> 
     <asp:Series Name="DevelopmentBacklog" /> 
     <asp:Series Name="DevDaysCompleted" /> 
     <asp:Series Name="DevCapacity" /> 
     <asp:Series Name="NewDaysScheduled" /> 
    </Series> 
    <ChartAreas> 
     <asp:ChartArea Name="chartArea" BorderWidth="0" /> 
    </ChartAreas> 
</asp:chart> 

代码隐藏：

using System; 
using System.Collections.Generic; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.UI.DataVisualization.Charting; 
using System.Drawing; 

public partial class Default : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 
     string[] xAxis = { "Jan 2011", "Feb 2011", "Mar 2011", "Apr 2011", "May 2011", "Jun 2011", "Jul 2011", "Aug 2011" }; 
     double[] yAxisDevBacklog = { 220, 200, 120, 30, 25, 50, 30, 590 }; 
     double[] yAxisDevDaysCompleted = { 140, 145, 165, 105, 98, 140, 80, 100 }; 
     double[] yAxisDevCapacity = { 140, 155, 182, 122, 184, 210, 190, 205}; 
     double[] yAxisNewDaysScheduled = { 29, 40, 55, 48, 59, 75, 70, 182 }; 

     Chart1.Series["DevelopmentBacklog"].Points.DataBindXY(xAxis, yAxisDevBacklog); 
     Chart1.Series["DevelopmentBacklog"].ChartType = SeriesChartType.StackedColumn; 
     Chart1.Series["DevelopmentBacklog"].BorderWidth = 3; 
     Chart1.Series["DevelopmentBacklog"].Color = Color.Blue; 
     //// Uncomment this line to use the secondary y axis 
     //// Chart1.Series["DevelopmentBacklog"].YAxisType = AxisType.Secondary; 
     Chart1.Series["DevelopmentBacklog"]["StackedGroupName"] = "DevelopmentBacklog"; 

     Chart1.Series["NewDaysScheduled"].Points.DataBindXY(xAxis, yAxisNewDaysScheduled); 
     Chart1.Series["NewDaysScheduled"].ChartType = SeriesChartType.StackedColumn; 
     Chart1.Series["NewDaysScheduled"].BorderWidth = 3; 
     Chart1.Series["NewDaysScheduled"].Color = Color.Green; 
     Chart1.Series["NewDaysScheduled"]["StackedGroupName"] = "NewDaysScheduled"; 

     Chart1.Series["DevDaysCompleted"].Points.DataBindXY(xAxis, yAxisDevDaysCompleted); 
     Chart1.Series["DevDaysCompleted"].ChartType = SeriesChartType.StackedColumn; 
     Chart1.Series["DevDaysCompleted"].BorderWidth = 3; 
     Chart1.Series["DevDaysCompleted"].Color = Color.LightGray; 
     Chart1.Series["DevDaysCompleted"]["StackedGroupName"] = "DevDaysCompleted"; 

     Chart1.Series["DevCapacity"].Points.DataBindXY(xAxis, yAxisDevCapacity); 
     Chart1.Series["DevCapacity"].ChartType = SeriesChartType.StackedColumn; 
     Chart1.Series["DevCapacity"].BorderWidth = 3; 
     Chart1.Series["DevCapacity"].Color = Color.OrangeRed; 
     Chart1.Series["DevCapacity"]["StackedGroupName"] = "DevDaysCompleted"; 

     Chart1.ChartAreas["chartArea"].AxisX.MajorGrid.Enabled = false; 
     Chart1.ChartAreas["chartArea"].AxisY2.MajorGrid.Enabled = false; 
    } 
} 

Answer 1

我认为你需要设置一系列的自定义属性。默认情况下，此属性设置为自动。您需要将其更改为True，以便始终并行绘制。

Chart1.Series["DevelopmentBacklog"].CustomProperties = "DrawSideBySide=True"; 
Chart1.Series["DevDaysCompleted"].CustomProperties = "DrawSideBySide=True"; 
Chart1.Series["DevCapacity"].CustomProperties = "DrawSideBySide=True"; 
Chart1.Series["NewDaysScheduled"].CustomProperties = "DrawSideBySide=True"; 

MSDN - DrawSideBySide Property