带有堆叠列和两个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