如何使用System.Web.UI.DataVisualization.Charting正确对齐标签 [英] How to align labels properly using System.Web.UI.DataVisualization.Charting

问题描述

我有一个通过System.Web.UI.DataVisualization.Charting生成的图表. 下面是代码

I have a chart which generated through System.Web.UI.DataVisualization.Charting. Below is the code

public ActionResult MBRRChart()
    {
        //Area for generating chart type Range bar
        List<dummyGraph> objGraphList = new List<dummyGraph>();
        dummyGraph objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Underwriter";
        objDummyGraph.min = 1;
        objDummyGraph.max = 8;
        objDummyGraph.Median = "1";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Construction";
        objDummyGraph.min = 2;
        objDummyGraph.max = 5;
        objDummyGraph.Median = "2";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Design";
        objDummyGraph.min = 3;
        objDummyGraph.max = 6;
        objDummyGraph.Median = "3";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Partner";
        objDummyGraph.min = 4;
        objDummyGraph.max = 6;
        objDummyGraph.Median = "3";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Construction";
        objDummyGraph.min = 2;
        objDummyGraph.max = 5;
        objDummyGraph.Median = "2";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Design";
        objDummyGraph.min = 3;
        objDummyGraph.max = 6;
        objDummyGraph.Median = "3";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Partner";
        objDummyGraph.min = 4;
        objDummyGraph.max = 6;
        objDummyGraph.Median = "3";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Construction";
        objDummyGraph.min = 2;
        objDummyGraph.max = 5;
        objDummyGraph.Median = "2";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Design";
        objDummyGraph.min = 3;
        objDummyGraph.max = 6;
        objDummyGraph.Median = "3";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Partner";
        objDummyGraph.min = 4;
        objDummyGraph.max = 6;
        objDummyGraph.Median = "3";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Construction";
        objDummyGraph.min = 2;
        objDummyGraph.max = 5;
        objDummyGraph.Median = "2";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Design";
        objDummyGraph.min = 3;
        objDummyGraph.max = 6;
        objDummyGraph.Median = "3";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Partner";
        objDummyGraph.min = 4;
        objDummyGraph.max = 6;
        objDummyGraph.Median = "3";
        objGraphList.Add(objDummyGraph);

        System.Web.UI.DataVisualization.Charting.Chart chart1 = new System.Web.UI.DataVisualization.Charting.Chart();
        System.Web.UI.DataVisualization.Charting.ChartArea chartArea1 = new System.Web.UI.DataVisualization.Charting.ChartArea();
        System.Web.UI.DataVisualization.Charting.Legend legend1 = new System.Web.UI.DataVisualization.Charting.Legend();
        System.Web.UI.DataVisualization.Charting.Series seriesInstance;

        chart1.Titles.Add("Market Based Rate Range");//Add chart title 

        //chart series initialization
        seriesInstance = new System.Web.UI.DataVisualization.Charting.Series("xAxis");
        seriesInstance.ChartType = SeriesChartType.RangeBar;//Set chart type here
        seriesInstance.Color = Color.SkyBlue;
        seriesInstance.YValuesPerPoint = 2;
        seriesInstance.SmartLabelStyle.Enabled = true;
        seriesInstance.IsValueShownAsLabel = true;
        //END

        chart1.Series.Add(seriesInstance);

        //Bind values to chart
        chart1.DataSource = objGraphList;
        chart1.Series[0].XValueMember = "TKFEType";
        chart1.Series[0].YValueMembers = "min, max";
        chart1.Series[0].Label = "#VALY <-> #VALY2";

        chart1.DataBind();
        //END

        chart1.ChartAreas.Add(chartArea1);
        chartArea1 = chart1.ChartAreas[0];

        //Used to hide Grid lines
        chartArea1.AxisX.MajorGrid.Enabled = false;
        chartArea1.AxisX.MinorGrid.Enabled = false;
        chartArea1.AxisY.MajorGrid.Enabled = false;
        chartArea1.AxisY.MinorGrid.Enabled = false;
        //END

        //Used to hide the x axis values
        chartArea1.AxisY.Enabled = AxisEnabled.False;
        //END

        //END

        //Area for returning created chart as image file
        using (MemoryStream ms = new MemoryStream())
        {
            chart1.SaveImage(ms, ChartImageFormat.Png);
            return File(ms.ToArray(), "image/png");
        }
        //END
    }
    //END

当我运行上面的代码时，我的图表将如下图所示

When i run the above code my chart will looks like following image

在该图像中，您可以看到Yaxis标签和条形图未正确对齐(在同一行中)

In that image you can see that Yaxis labels and bar is not aligning properly (In the same line)

为什么会这样

推荐答案

就像我在之前的评论中所说，在某些情况下，您的范围栏太窄而无法包含标签，因此图表将其放置在外面.我尝试了SmartLabelStyle和CustomProperties中的某些属性，但是似乎没有任何作用.

Like i said in my previous comment, your range bar in some cases is too narrow to contain the label, so the chart puts it outside. I tried some of the properties in SmartLabelStyle and also CustomProperties but none of them seem to have any effect.

关于沿Y轴的垂直对齐，我的建议是不要重复.创建多个List<DummyGraph>并将每个绑定到其自己的图表Series.这样就不会有重复，一切都会对齐并且看起来会更好.

Regarding the vertical alignment along Y-Axis, my suggestion is to not have duplicates. Create multiple List<DummyGraph> and bind each one to its own chart Series. This way there's no duplicates and everything aligns and looks much better.

这里:

    protected void Page_Load(object sender, EventArgs e)
    {
        //Just creating some random data
        Random r = new Random();
        DummyGraphList data1 = new DummyGraphList(r);
        DummyGraphList data2 = new DummyGraphList(r);

        //Bind each list to its own series
        Chart1.Series[0].Points.DataBind(data1, "TKFType", "Min,Max", null);
        Chart1.Series[1].Points.DataBind(data2, "TKFType", "Min,Max", null);
    }

结果:

这篇关于如何使用System.Web.UI.DataVisualization.Charting正确对齐标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！