c# - grafica - Gráfico con columnas apiladas y dos ejes Y
grafico columna apilada doble (1)
Intento crear un gráfico con varias columnas, incluidas algunas que están apiladas y también tienen 2 ejes Y.
Cuando todas las columnas usan el eje y primario, aparecen correctamente una al lado de la otra.
pero cuando uno (o más, pero no todos) usa el segundo eje y parece apilar todas las columnas en cada eje en lugar de mostrarlas una al lado de la otra.
¿Cómo puedo hacer que las columnas aparezcan una al lado de la otra, pero también se muestran dos ejes y? He incluido el código de mi página de demostración a continuación.
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>
Código detrás:
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;
}
}
Creo que necesita establecer propiedades personalizadas de serie. Por defecto, esta propiedad está configurada en Auto. Debe cambiar esto a True para que siempre se dibuje uno al lado del otro.
Chart1.Series["DevelopmentBacklog"].CustomProperties = "DrawSideBySide=True";
Chart1.Series["DevDaysCompleted"].CustomProperties = "DrawSideBySide=True";
Chart1.Series["DevCapacity"].CustomProperties = "DrawSideBySide=True";
Chart1.Series["NewDaysScheduled"].CustomProperties = "DrawSideBySide=True";