.net - チャート コントロール 2 つのデータ セット バーの重なり

Question

私は ASP.NET プロジェクトに取り組んでおり、2 つのデータ セットが並んだ棒グラフがあります。それらをオーバーラップさせるにはどうすればよいですか。

データの 1 つはタンク サイズ、もう 1 つは現在のレベルです。

Answer 1

<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">

バーの1つを列に、もう1つを積み上げてChartTypeに変更しました-これは汚い方法かもしれませんが、うまくいきます。それが私が気にするすべてです。

Answer 2

上記の StackedColumn ソリューションに基づいて構築します。列を完全にオーバーラップさせたくないが、代わりに部分的にオーバーラップさせたい場合。3 番目のシリーズを生成できます。2 つのシリーズは ChartType="Column" になり、1 つは "StackedColumn" になります。

ChartType 列の 2 番目のシリーズには、少なくとも 1 つのポイントが必要ですが、そのポイントを 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 未満にして、それらのアイテムのチャート エリア内にスペースを確保する必要があります。そうしないと、アイテムが非表示になります。

最後に、レイヤーを使用する場合は、必ずすべての背景を透明に設定してください。そうしないと、最後に追加されたレイヤーのみが表示されます。背景が必要な場合は、最初のレイヤーに適用します。

Answer 3

PointWidth カスタム属性を使用できます

chartObj.Series[0]["PointWidth"] = "1.3";