如何在System.Web.Helpers.Chart柱状图的柱体上显示数值标签？

Hey there! I totally get wanting to display exact values on top of your column bars—it makes the chart way easier to parse at a glance. Good news is, System.Web.Helpers.Chart supports this out of the box with just a small tweak to your existing code.

The Fix: Add Labels via the AddSeries Parameter #

You can display data labels by including the label parameter in each AddSeries call, using the #VAL placeholder (this gets automatically replaced with the numerical value of each bar). If you want to adjust the label's position or style, you can also use the customAttributes parameter for finer control.

Here's your modified code with data labels added:

public ActionResult columnChartForECNWithoutECO() {
    ArrayList xValueDraft = new ArrayList();
    ArrayList xValueWithoutECO = new ArrayList();
    ArrayList yValue = new ArrayList();
    SAMMeerkatECCSDataAccess dataAccess = new SAMMeerkatECCSDataAccess();
    System.Data.DataTable results = dataAccess.reportGetECNWithoutECOByUser();
    foreach (DataRow row in results.Rows) {
        xValueDraft.Add(row["Draft"].ToString());
        xValueWithoutECO.Add(row["WithoutECO"].ToString());
        yValue.Add(row["userName"].ToString());
    }
    var key = new System.Web.Helpers.Chart(width: 600, height: 400, theme: ChartTheme.Vanilla)
        .AddTitle("Total ECN Without ECO By User")
        .AddLegend("Details")
        .AddSeries (
            chartType: "Column",
            xValue: yValue,
            yValues: xValueDraft,
            axisLabel: "Bar 1",
            name: "ECO Draft",
            label: "#VAL", // Inserts the bar's numerical value
            customAttributes: "LabelStyle=Top" // Positions label at the top of the bar
        )
        .AddSeries(
            chartType: "Column",
            axisLabel: "Bar 2",
            xValue: yValue,
            yValues: xValueWithoutECO,
            name: "Without ECO",
            label: "#VAL", // Add this for the second series
            customAttributes: "LabelStyle=Top"
        );
    return File(key.ToWebImage().GetBytes(), "image/jpeg");
}

Quick Notes on the Changes: #

• #VAL: This is a built-in placeholder that pulls the actual value of each data point. Other useful placeholders include #VALY (for explicit Y-axis values) or #SERIESNAME (to show the series name), but #VAL is perfect for your use case.
• customAttributes: "LabelStyle=Top": This ensures labels sit neatly on top of columns. You can swap Top with Center or Bottom if you prefer a different position.
• For extra styling (like font size or color), expand the customAttributes value, e.g., "LabelStyle=Top, FontSize=10, FontColor=DarkSlateGray".

That’s it—your column bars will now display their corresponding values exactly like you wanted!

内容的提问来源于stack exchange，提问作者Ng Zheng