Управление диаграммой, две перекрывающиеся полосы набора данных

Я работаю над проектом ASP.NET, и у меня есть гистограмма с двумя наборами данных рядом друг с другом. Как я могу получить их на коленях.

Один элемент данных — размер резервуара, другой — текущий уровень.


person Brobina    schedule 11.07.2012    source источник


Ответы (3)


<asp:Series ChartArea="ChartArea1" Font="MS Mincho, 8pt, style=Bold" 
            Legend="Legend1" Name="Tank Size" XValueMember="Serial" 
            YValueMembers="DeviceSize" ChartType="StackedColumn">
        </asp:Series>
        <asp:Series Legend="Legend1" Name="Current Level" XValueMember="Serial" 
            YValueMembers="DeviceLevel" YValuesPerPoint="2" 
            Font="Mangal, 8pt, style=Bold" ChartType="Column">

Я изменил ChartType на одном из столбцов на столбец, а на другом — на стек — это может быть грязным способом, но я работаю. Это все, что меня волнует.

person Brobina    schedule 12.07.2012

Чтобы использовать вышеприведенное решение StackedColumn. Если вы не хотите, чтобы столбцы полностью перекрывались, а просто хотите частичное перекрытие. Вы можете создать третью серию, две из которых будут иметь тип ChartType="Column", а одна - "StackedColumn".

Для второй серии столбца ChartType требуется по крайней мере одна точка, но установите для этой точки значение Y, равное 0, чтобы она не отображалась; эта серия будет иметь эффект отодвигания другой серии в сторону.

    Chart chrt = new Chart();
    chrt.ChartAreas.Add("ChartArea");

    // The series in back
    Series chrtS = new Series();
    chrtS.Points.Add(new DataPoint(2, 3));
    chrtS.Points.Add(new DataPoint(3, 4));
    chrtS.Points.Add(new DataPoint(4, 5));
    chrtS.ChartType = SeriesChartType.Column;
    chrtS.Color = System.Drawing.Color.Blue;
    chrtS["PointWidth"] = ".5";
    chrt.Series.Add(chrtS);

    // The series invisibly pushing the one above over
    Series chrtS1 = new Series();
    chrtS1.Points.Add(new DataPoint(2, 0));
    chrtS1.ChartType = SeriesChartType.Column;
    chrtS1.Color = System.Drawing.Color.Green;
    chrtS1["PointWidth"] = ".5";
    chrt.Series.Add(chrtS1);

    // The series stacked on top
    Series chrtS2 = new Series();
    chrtS2.Points.Add(new DataPoint(2, 4));
    chrtS2.Points.Add(new DataPoint(3, 3));
    chrtS2.Points.Add(new DataPoint(4, 2));
    chrtS2.ChartType = SeriesChartType.StackedColumn;
    chrtS2.Color = System.Drawing.Color.Red;
    chrtS2["PointWidth"] = ".25";
    chrt.Series.Add(chrtS2);

Я изменил значения для изображения после публикации кода, однако в конечном итоге это даст вам что-то вроде этого:

введите здесь описание изображения


Если вам нужен более детальный контроль над метками или расстоянием, на которое полосы скользят друг над другом, вы можете использовать Области диаграммы для достижения этой цели.

    Chart chrt = new Chart();
    chrt.ChartAreas.Add("ChartAreaRed");
    chrt.ChartAreas["ChartAreaRed"].BackColor = System.Drawing.Color.Transparent;
    chrt.ChartAreas["ChartAreaRed"].Position.Height = 100;
    chrt.ChartAreas["ChartAreaRed"].Position.Width = 100;
    chrt.ChartAreas["ChartAreaRed"].InnerPlotPosition.Height = 90;
    chrt.ChartAreas["ChartAreaRed"].InnerPlotPosition.Width = 80;
    chrt.ChartAreas["ChartAreaRed"].InnerPlotPosition.X = 10;
    chrt.ChartAreas["ChartAreaRed"].AxisY.Maximum = 6;
    chrt.ChartAreas["ChartAreaRed"].AxisX.Maximum = 5;
    chrt.ChartAreas["ChartAreaRed"].AxisX.Interval = 1;
    chrt.ChartAreas["ChartAreaRed"].Position.X = 0;
    chrt.ChartAreas.Add("ChartAreaGreen");
    chrt.ChartAreas["ChartAreaGreen"].BackColor = System.Drawing.Color.Transparent;
    chrt.ChartAreas["ChartAreaGreen"].Position.Height = 100;
    chrt.ChartAreas["ChartAreaGreen"].Position.Width = 100;
    chrt.ChartAreas["ChartAreaGreen"].InnerPlotPosition.Height = 90;
    chrt.ChartAreas["ChartAreaGreen"].InnerPlotPosition.Width = 80;
    chrt.ChartAreas["ChartAreaGreen"].InnerPlotPosition.X = 10;
    chrt.ChartAreas["ChartAreaGreen"].AxisY.Maximum = 6;
    chrt.ChartAreas["ChartAreaGreen"].AxisX.Maximum = 5;
    chrt.ChartAreas["ChartAreaGreen"].AxisX.Interval = 1;
    chrt.ChartAreas["ChartAreaGreen"].Position.X = 0;
    chrt.ChartAreas["ChartAreaGreen"].Axes[0].Enabled = AxisEnabled.False;
    chrt.ChartAreas["ChartAreaGreen"].Axes[1].Enabled = AxisEnabled.False;
    chrt.ChartAreas.Add("ChartAreaBlue");
    chrt.ChartAreas["ChartAreaBlue"].BackColor = System.Drawing.Color.Transparent;
    chrt.ChartAreas["ChartAreaBlue"].Position.Height = 100;
    chrt.ChartAreas["ChartAreaBlue"].Position.Width = 100;
    chrt.ChartAreas["ChartAreaBlue"].InnerPlotPosition.Height = 90;
    chrt.ChartAreas["ChartAreaBlue"].InnerPlotPosition.Width = 80;
    chrt.ChartAreas["ChartAreaBlue"].InnerPlotPosition.X = 15;
    chrt.ChartAreas["ChartAreaBlue"].AxisY.Maximum = 6;
    chrt.ChartAreas["ChartAreaBlue"].AxisX.Maximum = 5;
    chrt.ChartAreas["ChartAreaBlue"].AxisX.Interval = 1;
    chrt.ChartAreas["ChartAreaBlue"].Axes[0].Enabled = AxisEnabled.False;
    chrt.ChartAreas["ChartAreaBlue"].Axes[1].Enabled = AxisEnabled.False;

    chrt.ChartAreas["ChartAreaBlue"].AxisX.MajorGrid.Enabled = false;

    Series chrtS_Red = new Series();
    chrtS_Red.Points.Add(new DataPoint(2, 1));
    chrtS_Red.Points.Add(new DataPoint(3, 0));
    chrtS_Red.Points.Add(new DataPoint(4, 2));
    chrtS_Red.ChartType = SeriesChartType.Column;
    chrtS_Red.Color = System.Drawing.ColorTranslator.FromHtml("#aa220d"); // massini red
    chrtS_Red.IsValueShownAsLabel = true;
    chrtS_Red.EmptyPointStyle.IsValueShownAsLabel = false;
    chrtS_Red["PointWidth"] = ".5";
    chrtS_Red["LabelStyle"] = "TopLeft"; // Auto, Top, Bottom, Right, Left, TopLeft, TopRight, BottomLeft, BottomRight, Center
    chrtS_Red.ChartArea = "ChartAreaRed";
    chrt.Series.Add(chrtS_Red);

    Series chrtS_Green = new Series();
    chrtS_Green.Points.Add(new DataPoint(2, 0));
    chrtS_Green.Points[0].IsEmpty = true;
    chrtS_Green.Points.Add(new DataPoint(3, 5));
    chrtS_Green.Points.Add(new DataPoint(4, 0));
    chrtS_Green.Points[2].IsEmpty = true;
    chrtS_Green.ChartType = SeriesChartType.Column;
    chrtS_Green.Color = System.Drawing.ColorTranslator.FromHtml("#94952d"); // massini green
    chrtS_Green.IsValueShownAsLabel = true;
    chrtS_Green.EmptyPointStyle.IsValueShownAsLabel = false;
    chrtS_Green["LabelStyle"] = "TopLeft"; // Auto, Top, Bottom, Right, Left, TopLeft, TopRight, BottomLeft, BottomRight, Center
    chrtS_Green["PointWidth"] = ".5";
    chrtS_Green.ChartArea = "ChartAreaGreen";
    chrt.Series.Add(chrtS_Green);

    Series chrtS_Blue = new Series();
    chrtS_Blue.Points.Add(new DataPoint(2, 3));
    chrtS_Blue.Points.Add(new DataPoint(3, 4));
    chrtS_Blue.Points.Add(new DataPoint(4, 5));
    chrtS_Blue.ChartType = SeriesChartType.Column;
    chrtS_Blue.Color = System.Drawing.ColorTranslator.FromHtml("#3e8bc3"); // massini blue
    chrtS_Blue.IsValueShownAsLabel = true;
    chrtS_Blue["LabelStyle"] = "TopRight"; // Auto, Top, Bottom, Right, Left, TopLeft, TopRight, BottomLeft, BottomRight, Center
    chrtS_Blue["PointWidth"] = ".5";
    chrtS_Blue.ChartArea = "ChartAreaBlue";
    chrt.Series.Add(chrtS_Blue);

Это создаст что-то похожее на это:

Перекрытие с областями диаграммы

Этот метод определенно более сложен и труден для понимания. Но как только вы это поймете, это позволит гораздо лучше контролировать. Ключевым моментом является установка одинаковых значений ширины и высоты всех областей диаграммы, а затем то же самое с атрибутами InnerPlotPosition.

InnerPlotPosition позволяет вам управлять областью внутри области графика, предназначенной для отображения значений, а не включать линии сетки и значения в расчеты ширины и высоты.

Вы должны установить значение как для ширины, так и для высоты для InnerPlotPosition, иначе будет использоваться значение по умолчанию, равное 0, и вы ничего не увидите.

Кроме того, если вы собираетесь использовать линии сетки или значения осей X и Y, вам потребуется, чтобы значения ширины и высоты для InnerPlotPosition были меньше 100, чтобы оставить место внутри области диаграммы для этих элементов, иначе они будут скрыты.

Наконец, при использовании слоев убедитесь, что все фоны установлены прозрачными, иначе вы увидите только последний добавленный слой. Если вам нужен фон, примените его к первому слою.

person Jereme Guenther    schedule 24.02.2015

Вы можете использовать пользовательский атрибут PointWidth

chartObj.Series[0]["PointWidth"] = "1.3";
person Quantbuff    schedule 11.07.2012