如何在C＃中向柱形图顶部添加百分比 [英] How to add a percentage to top of Column chart in C#

问题描述

所以，这就是问题所在。

So, here's the problem.

我有一个图表，使用以下循环显示了横跨许多工作类型的完成和未完成两列：

I have a chart that displays two columns, Completed and Uncompleted, across a number of work types, using the following loop:

foreach (var workType in model.WorkTypes)
        {
            decimal completed = 0;
            decimal uncompleted = 0;
            decimal workSubmitted = 0;
            decimal completionRate= 0;
            foreach (var rec in model.JobList.Where(x => x.jobType== workType.Id))
            {
                uncompleted += model.JobList.SingleOrDefault(x => x.recID== rec.recID && x.jobType == workType.Id).Uncompleted;
                completed += model.JobList.SingleOrDefault(x => x.recID == rec.recID && x.jobType == workType.Id).Completed;

            }
            workSubmitted = uncompleted + completed;

            if (uncompleted != 0)
            {
                completionRate= (completed/ workSubmitted) * 100;
            }                
            myChart.Series["Uncompleted"].Points.AddXY(workType.TypeName, uncompleted );
            myChart.Series["Completed"].Points.AddXY(workType.TypeName, completed);
        }

我要执行的操作是在两列上方显示标签，以显示completionRate

What I am trying to do is have it display a label above the two columns that displays the completionRate value as a percentage for each workType.

任何帮助或建议都将不胜感激。

Any help or advice would be appreciated.

这是图表的当前外观：

This is the current look of the chart:

推荐答案

默认情况下，标签显示y值，但是您可以为每个 DataPoint 设置任意的 Label 例如当您添加这样的点时：

By default the Labels show the y-value but you can set an arbitrary Label for each DataPoint e.g. when you add the point like this:

int p = myChart.Series["Uncompleted"].Points.AddXY(workType.TypeName, rejections);
myChart.Series["Uncompleted"].Points[p].Label = sometext;

当然，您可以根据需要计算标签的文本，例如：

And of course you can calculate the text for the label as needed, e.g.:

string sometext = (workSubmitted / rejections * 100).ToString("0.00") + "%";

请注意，之后必须更新 Label 更改计算中的值。不支持自动表达式！

Note that you must update the Label after changing the values in your calculation. No automatic expressions are supported!

更新

如我所写，将标签 居中位于列共享的x值上，这是很难的，甚至是不可能的；这是因为 Label 属于单个数据点。对于柱形（和条形）类型图，这是一个独特的问题，因为在这里，系列的点在簇中显示在共同的x值周围。 （我们可以通过在中间点添加标签的方式来解决此问题，当且仅当我们拥有奇数的序列数时）

As I wrote, placing a Label centered at the x-value the columns share, is hard or even impossible; that is because a Label belongs to an individual data point. This is a unique problem with column (and bar) type charts, since here the points of the series are displayed in clusters around the common x-value. (We could workaround if and only if we had an odd number of series by adding the labels to the mid points)

因此，我们需要使用注释。这是一个将 TextAnnotation 放置在x值和两个数据点的较大y值高度处的函数。.：

So we need to use Annotations. Here is a function that will place a TextAnnotation centered at the x-value and at the height of the larger y-value of two data points..:

void setCenterAnnotation(Chart chart, ChartArea ca, 
                         DataPoint dp1, DataPoint dp2, string lbl)
{
        TextAnnotation ta = new TextAnnotation();
        ta.Alignment = ContentAlignment.BottomCenter;
        ta.AnchorAlignment = ContentAlignment.TopCenter;
        DataPoint dp = dp1.YValues[0] > dp2.YValues[0] ? dp1 : dp2;
        ta.Height = 0.36f;
        ta.AxisX = ca.AxisX;
        ta.AxisY = ca.AxisY;
        ta.AnchorDataPoint = dp;
        ta.AnchorX = dp1.XValue;
        ta.Text =  lbl;
        chart.Annotations.Add(ta);
}

如果您有两个以上的系列您最好确定锚点，即之前具有较大值的锚点，然后将其传递，而不是我在此处传递的两点。.

If you have more than two Series you would best determine the anchorpoint, i.e. the one with the larger value before, and pass it instead of the two points I pass here..

放置/锚注并不是很明显，因此有一些注意事项：

Placing/anchoring annotations is not really obvious, so here are a few notes:

• 我锚定 DataPoint 使其显示在其y值的高度。

• I anchor to a DataPoint to make it show at the height of its y-value.

要使用（轴- ）用于锚定一个的值必须为其分配一个或两个轴。

To use (axis-)values for anchoring one has to assign one or both axes to it.

I 然后（顺序很重要！）将 AnchorX 属性，这样它就不会位于某个点的中心，而是位于一个普通的x值上。

I then (order matters!) set the AnchorX property so that it is not centered over a point but over the common x-value.

I还设置一些 Height ，否则文本将不会在该列的顶部移动；

I also set some Height or else the text won't move up on top of the column; not quite sure what the rationale is here..

这是结果：

我在添加点时添加了注释：

I had added the anotations while adding the points:

int ix = s1.Points.AddXY(i, rnd.Next(i+7));
s2.Points.AddXY(i, rnd.Next(i+4)+3);
double vmax = Math.Max(s1.Points[ix].YValues[0], s2.Points[ix].YValues[0]);
string lbl = (vmax / 123f).ToString("0.0") + "%";
setCenterAnnotation(chart12, ca, s1.Points[ix], s2.Points[ix], lbl );

这篇关于如何在C＃中向柱形图顶部添加百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！