饼图中的值答案

【问题标题】：Values in a pie chart饼图中的值
【发布时间】：2011-12-06 17:08:56
【问题描述】：

如何使用 ChartHelper 在饼图中显示每个饼的值？我正在使用 MVC3/Razor 语法。

尝试做这样的事情：

图片来自this tutorial，用于 MVC 中的 ChartHelper：

我的代码：

var bytes = new Chart(600, 300).AddSeries(
                    chartType: "pie",
                    legend: "Sales in Store per Payment Collected",
                    xValue: viewModel.SalesInStorePerPaymentCollected.XValues,
                    yValues: viewModel.SalesInStorePerPaymentCollected.YValues
                    )
                    .GetBytes("png");


            return File(bytes, "image/png");

【问题讨论】：

您也可以通过结合客户端和服务器端来实现该图像。拖放一个图表控件，使用 html 和 css 来定位它。设置系列 CustomProperties="PieLineColor=Black, PieLabelStyle=Outside"，根据您的需要自定义点，然后通过调用 'Chart.Series[0].Points[0].SetValueY(value) 从服务器端代码处理外部标签值)' 设置每个饼图的值，'Chart1.Series[0].Points[0].Label = value' 设置外部标签文本。不知道你是如何分开馅饼的。也许在玩 xAxis

标签： c# asp.net-mvc asp.net-mvc-3 mschart

【解决方案1】：

我是通过使用 System.Web.UI.DataVisualization.Charting.Chart 类来实现的。

这是我的控制器中的代码：

public ActionResult Chart()
{
    Chart chart = new Chart();
    chart.ChartAreas.Add(new ChartArea());

    chart.Series.Add(new Series("Data"));
    chart.Series["Data"].ChartType = SeriesChartType.Pie;
    chart.Series["Data"]["PieLabelStyle"] = "Outside"; 
    chart.Series["Data"]["PieLineColor"] = "Black";
    chart.Series["Data"].Points.DataBindXY(
        data.Select(data => data.Name.ToString()).ToArray(), 
        data.Select(data => data.Count).ToArray());
    //Other chart formatting and data source omitted.

    MemoryStream ms = new MemoryStream();
    chart.SaveImage(ms, ChartImageFormat.Png);
    return File(ms.ToArray(), "image/png");
}

还有观点：

<img alt="alternateText" src="@Url.Action("Chart")" />

【讨论】：

我的图表来自 System.Web.Helpers 命名空间。看起来您的图表来自 System.Web.UI.DataVisualization.Charting。如何将 System.Web.UI.DataVisualization.Charting.Chart 返回到 MVC 视图？
@Anish 你说的很对，对不起。我更新了我的示例以包含完整的控制器方法和视图。

【解决方案2】：

感谢 DaveShaw，我的解决方案。需要更多的调整，但给了我大部分我需要的东西。

        Chart chart = new Chart();

        chart.ChartAreas.Add(new ChartArea());

        chart.Series.Add(new Series("Data"));
        chart.Legends.Add(new Legend("Stores"));
        chart.Series["Data"].ChartType = SeriesChartType.Pie;
        chart.Series["Data"]["PieLabelStyle"] = "Outside";
        chart.Series["Data"]["PieLineColor"] = "Black";
        for (int x = 0; x < viewModel.SalesInStorePerPaymentCollected.XValues.Length; x++)
        {
           int ptIdx = chart.Series["Data"].Points.AddXY(
                viewModel.SalesInStorePerPaymentCollected.XValues[x],
                viewModel.SalesInStorePerPaymentCollected.YValues[x]);
           DataPoint pt = chart.Series["Data"].Points[ptIdx];
           pt.LegendText = "#VALX: #VALY";
           pt.LegendUrl = "/Contact/Details/Hey";
        }

        chart.Series["Data"].Label = "#PERCENT{P0}";
        chart.Series["Data"].Font = new Font("Segoe UI", 8.0f, FontStyle.Bold);
        chart.Series["Data"].ChartType = SeriesChartType.Pie;
        chart.Series["Data"]["PieLabelStyle"] = "Outside";
        chart.Series["Data"].Legend = "Stores";
        chart.Legends["Stores"].Docking = Docking.Bottom;

        var returnStream = new MemoryStream();
        chart.ImageType = ChartImageType.Png;
        chart.SaveImage(returnStream);
        returnStream.Position = 0;
        return new FileStreamResult(returnStream, "image/png");

渲染到这个：

【讨论】：

【解决方案3】：

我的答案和解决方案（与解释一起使用）：

这适合带有 .NET 4 框架的 MVC 4 和 MVC 3，并添加了对 System.Web.DataVisualization.dll 而不是 .net System.Web.Helpers 的引用，DataVisualization.dll 可以在 http://www.codeproject.com/Articles/125230/ASP-NET-MVC-Chart-Control

ChartApplication->外部引用

可以在此处找到有关使用 DataVisualization 的图表的更多信息。

没关系，它可以替换为：

        public ActionResult Chart()
    {
        Chart chart = new Chart();

        chart.ChartAreas.Add(new ChartArea());

        chart.Series.Add(new Series("Data"));
        chart.Legends.Add(new Legend("Stores"));
        chart.Series["Data"].ChartType = SeriesChartType.Spline;
        chart.Series["Data"].Points.AddXY(1.0, 5.0);
        chart.Series["Data"].Points.AddXY(2.0, 9.0);
        /*
        chart.Series["Data"]["PieLabelStyle"] = "Outside";
        chart.Series["Data"]["PieLineColor"] = "Black";
        */
        /*
            int ptIdx = chart.Series["Data"].Points.AddXY(1.0, 5.0);
            DataPoint pt = chart.Series["Data"].Points[ptIdx];
            pt.LegendText = "#VALX: #VALY";
            pt.LegendUrl = "/Contact/Details/Hey";
        */
        /*
        chart.Series["Data"].Label = "#PERCENT{P0}";
        chart.Series["Data"].Font = new Font("Segoe UI", 8.0f, FontStyle.Bold);
        chart.Series["Data"].ChartType = SeriesChartType.Pie;
        chart.Series["Data"]["PieLabelStyle"] = "Outside";
        chart.Series["Data"].Legend = "Stores";
        chart.Legends["Stores"].Docking = Docking.Bottom;
        */
        var returnStream = new MemoryStream();
        chart.ImageType = ChartImageType.Png;
        chart.SaveImage(returnStream);
        returnStream.Position = 0;
        return new FileStreamResult(returnStream, "image/png");
    }

或（对于带有 .net 4 和 System.Web.Helpers 的 mvc 4 和 mvc 3）：

        public ActionResult Chart()
    {
        var bytes = new Chart(600, 300).AddSeries(
                            chartType: "pie",
                            legend: "Sales in Store per Payment Collected",
                            xValue: new[] { "Jan", "Feb", "Mar", "Apr", "May" },
                            yValues: new[] { "20", "20", "40", "10", "10" }
                            )
                            .Write("png");
        return null;
    }

当然，您需要在 .cshtml 中添加以下内容：

<img src="/Home/Chart" alt="" />

【讨论】：