【问题标题】:How to put labels at the bottom of the chart如何在图表底部放置标签
【发布时间】:2020-11-23 15:39:16
【问题描述】:

我正在开发如下所示的对数图:

每个点的标签都位于该点的旁边,这是我不想要的,因为我要寻找的是标签位于图表的底部,就在图上的方向对应的 x 轴。

其硬编码编码如下:

Series series = Chart1.Series["Series1"];
Series seriesPuntos = new Series();
seriesPuntos.Points.AddXY(76.20, 100.0);
seriesPuntos.Points.AddXY(63.50, 100.0);
seriesPuntos.Points.AddXY(50.80, 100.0);
seriesPuntos.Points.AddXY(38.10, 100.0);
seriesPuntos.Points.AddXY(25.40, 98.6);
seriesPuntos.Points.AddXY(19.05, 90.0);
seriesPuntos.Points.AddXY(12.70, 83.0);
seriesPuntos.Points.AddXY(9.53, 75.9);
seriesPuntos.Points.AddXY(4.75, 59.8);
seriesPuntos.Points.AddXY(2.36, 46.8);
seriesPuntos.Points.AddXY(1.18, 39.3);
seriesPuntos.Points.AddXY(0.85, 36.8);
seriesPuntos.Points.AddXY(0.60, 30.7);
seriesPuntos.Points.AddXY(0.42, 27.1);
seriesPuntos.Points.AddXY(0.30, 25.7);
seriesPuntos.Points.AddXY(0.25, 24.0);
seriesPuntos.Points.AddXY(0.18, 21.9);
seriesPuntos.Points.AddXY(0.15, 20.6);
seriesPuntos.Points.AddXY(0.10, 19.7);
seriesPuntos.Points.AddXY(0.074, 18.3);
Chart1.Series.Add(seriesPuntos);

Chart1.Series[1].XValueType = ChartValueType.Double;
Chart1.Series[1].YValueType = ChartValueType.Double;

Chart1.Series[0].ChartType = SeriesChartType.Line;
Chart1.Series[1].ChartType = SeriesChartType.Point;

Chart1.Series[0].Color = Color.DarkRed;
Chart1.Series[0].BorderWidth = 1;
Chart1.Series[0].BorderDashStyle = ChartDashStyle.Dash;

Chart1.Series[1].Color = Color.DarkRed;
Chart1.Series[1].BorderWidth = 15;

Chart1.ChartAreas[0].BorderWidth = 1;
Chart1.ChartAreas[0].BorderDashStyle = ChartDashStyle.Solid;
Chart1.ChartAreas[0].AxisY.Interval = 2;
Chart1.ChartAreas[0].AxisX.Interval = 1;
Chart1.ChartAreas[0].AxisY.Minimum = 0;
Chart1.ChartAreas[0].AxisY.Maximum = 100;

Chart1.ChartAreas[0].AxisX.LabelStyle.Angle = 90;

series.Points.AddXY(76.20, 100.0);
series.Points.AddXY(63.50, 100.0);
series.Points.AddXY(50.80, 100.0);
series.Points.AddXY(38.10, 100.0);
series.Points.AddXY(25.40, 98.6);
series.Points.AddXY(19.05, 90.0);
series.Points.AddXY(12.70, 83.0);
series.Points.AddXY(9.53, 75.9);
series.Points.AddXY(4.75, 59.8);
series.Points.AddXY(2.36, 46.8);
series.Points.AddXY(1.18, 39.3);
series.Points.AddXY(0.85, 36.8);
series.Points.AddXY(0.60, 30.7);
series.Points.AddXY(0.42, 27.1);
series.Points.AddXY(0.30, 25.7);
series.Points.AddXY(0.25, 24.0);
series.Points.AddXY(0.18, 21.9);
series.Points.AddXY(0.15, 20.6);
series.Points.AddXY(0.10, 19.7);
series.Points.AddXY(0.074, 18.3);

Chart1.Series[0].XValueType = ChartValueType.Double;
Chart1.Series[0].YValueType = ChartValueType.Double;

Chart1.ChartAreas[0].AxisX.LabelStyle.Angle = 90;
Chart1.ChartAreas[0].AxisX.LabelAutoFitStyle = LabelAutoFitStyles.LabelsAngleStep90;
Chart1.ChartAreas[0].AxisX.IsLogarithmic = true;

Chart1.ChartAreas[0].AxisY.Title = "% QUE PASA EN PESO";
Chart1.ChartAreas[0].AxisY.TitleFont = new Font("Roboto", 11, FontStyle.Bold);

Chart1.ChartAreas[0].AxisX.Title = "ABERTURA (mm)";
Chart1.ChartAreas[0].AxisX.TitleFont = new Font("Roboto", 11, FontStyle.Bold);


Chart1.Series[0].IsValueShownAsLabel = true;
Chart1.Series[0].LabelBackColor = Color.White;
Chart1.Series[0].LabelAngle = 90;

Chart1.Series[0].IsXValueIndexed = true;
Chart1.Series[1].IsXValueIndexed = true;

查看:

<asp:Chart ID="Chart1" runat="server" BorderlineWidth="14" Width="990px" Height="450" class="card-img-top" Style="width: auto; !important">
            <Series>
                <asp:Series Name="Series1" ChartType="Line"></asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1"></asp:ChartArea>
            </ChartAreas>
            <Titles>
                <asp:Title Font="Roboto, 12pt, style=Bold" Name="Title1" Text="CURVA GRANULOMÉTRICA">
                    <Position Height="3.862135" Width="92" X="8" Y="1" />
                </asp:Title>
            </Titles>
        </asp:Chart>

我正在寻找的是每个点的标签位于图表的底部,如下所示:

【问题讨论】:

    标签: c# asp.net mschart


    【解决方案1】:
    • 您的示例似乎不起作用,至少在我的机器上(我也在网上找到了一些迹象)。您不能将 AxisX.IsLogarithmic 与 Series.IsXValueIndexed 一起使用。

    • 我不知道为什么您的代码有两个具有相同值的系列。 如果您想使用一条线并突出显示点,您应该使用 MarkerXXX 属性:

    series.ChartType = SeriesChartType.Line;
    series.MarkerColor = Color.Red;
    series.MarkerStyle = MarkerStyle.Circle;
    series.MarkerSize = 4;
    
    • 我认为没有任何方法可以“现成”地做您想做的事情。 您必须使用 AxisX.CustomLabels。比如:
    var series = Chart1.Series["Series1"];
    series.Points.AddXY(76.20, 100.0);
    series.Points.AddXY(63.50, 100.0);
    series.Points.AddXY(50.80, 100.0);
    series.Points.AddXY(38.10, 100.0);
    series.Points.AddXY(25.40, 98.6);
    series.Points.AddXY(19.05, 90.0);
    series.Points.AddXY(12.70, 83.0);
    series.Points.AddXY(9.53, 75.9);
    series.Points.AddXY(4.75, 59.8);
    series.Points.AddXY(2.36, 46.8);
    series.Points.AddXY(1.18, 39.3);
    series.Points.AddXY(0.85, 36.8);
    series.Points.AddXY(0.60, 30.7);
    series.Points.AddXY(0.42, 27.1);
    series.Points.AddXY(0.30, 25.7);
    series.Points.AddXY(0.25, 24.0);
    series.Points.AddXY(0.18, 21.9);
    series.Points.AddXY(0.15, 20.6);
    series.Points.AddXY(0.10, 19.7);
    series.Points.AddXY(0.074, 18.3);
    
    series.XValueType = ChartValueType.Double;
    series.YValueType = ChartValueType.Double;
    series.ChartType = SeriesChartType.Line;
    series.Color = Color.DarkRed;
    series.BorderWidth = 1;
    series.BorderDashStyle = ChartDashStyle.Dash;
    series.MarkerColor = Color.Red;
    series.MarkerStyle = MarkerStyle.Circle;
    series.MarkerSize = 4;
    
    var chartArea = Chart1.ChartAreas[0];
    chartArea.BorderWidth = 1;
    chartArea.BorderDashStyle = ChartDashStyle.Solid;
    
    chartArea.AxisY.Interval = 2;
    chartArea.AxisY.Minimum = 0;
    chartArea.AxisY.Maximum = 100;
    chartArea.AxisY.Title = "% QUE PASA EN PESO";
    chartArea.AxisY.TitleFont = new Font("Roboto", 11, FontStyle.Bold);
    
    chartArea.AxisX.LabelStyle.Angle = -90;
    chartArea.AxisX.Title = "ABERTURA (mm)";
    chartArea.AxisX.TitleFont = new Font("Roboto", 11, FontStyle.Bold);
    
    chartArea.AxisX.IsLogarithmic = true;
    chartArea.AxisX.MinorGrid.Interval = 1;
    chartArea.AxisX.MinorGrid.Enabled = true;
    
    //Axis is in log, so the CustomLabels fromPosition and toPosition should be as well - This gave me a small headache
    var logBase = Chart1.ChartAreas[0].AxisX.LogarithmBase;
    //Define the interval to show the text
    var customLabelInterval = Math.Log(0.01, logBase);
    foreach (var seriesPoint in series.Points)
    {
        chartArea.AxisX.CustomLabels.Add(Math.Log(seriesPoint.XValue, logBase) - customLabelInterval, Math.Log(seriesPoint.XValue, logBase) + customLabelInterval, seriesPoint.XValue.ToString(CultureInfo.CurrentCulture));
    }
    

    导致

    【讨论】:

    • 您好,感谢您的回答,对数刻度线很棒,我不知道可以这样做,我使用了 Chart1.ChartAreas [0] .AxisX.MinorGrid .启用=真; Chart1.ChartAreas [0] .AxisX.MinorGrid.Interval = 1; 另一方面,你是对的,我不必要地制作了两个列表,一个用于线条,一个用于点。我也想把两个 Y 轴为零的列表放在一起,但我不知道如何放置标签,所以你的答案正是我想要的。
    猜你喜欢
    • 2015-04-02
    • 2015-04-14
    • 2015-03-08
    • 2020-09-09
    • 2016-12-03
    • 1970-01-01
    • 2017-06-19
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多