如何使用System.Web.UI.DataVisualization.Charting正确对齐标签

Question

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

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

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

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

为什么会这样呢

Answer 1

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

关于沿Y轴的垂直对齐，我的建议是没有重复。创建多个List<DummyGraph>并将每个Series绑定到自己的图表 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); } 。通过这种方式，没有重复，一切都对齐，看起来好多了。

下面：

$http.post('MyAPI'sURLHere', {date: $scope.information.PubDate})
                    .then(function(response){
                        console.log(response);
                    }, function(error){
                        console.log(error);
                    });

结果：