ASP.NET MVC 图表助手。如何为图表上的每个条形图/柱形图设置不同的颜色？答案

【问题标题】：ASP.NET MVC Chart Helper. How to set different color for each Bar/Column on chart?ASP.NET MVC 图表助手。如何为图表上的每个条形图/柱形图设置不同的颜色？
【发布时间】：2012-11-08 05:17:11
【问题描述】：

我正在使用 ASP.NET MVC 3.0 图表助手。

由于某种原因，配色方案（例如Rainfall）仅适用于饼图和圆环图，不适用于任何其他类型（条形图、柱形图等）。

所有其他图表上的条形/柱形都具有相同的颜色。如何解决？

这是我的图表：

chart = new System.Web.Helpers.Chart(width: 100, height: 200)
                .AddSeries(
                    chartType: Bar,
                    legend: Rainfall
                    xValue: new[] { "Jan", "Feb", "Mar", "Apr", "May" },
                    yValues: new[] { "20", "20", "40", "10", "10" });
            }

我也试图使用来自System.Web.Helpers public static class ChartTheme 的所有方案，这些都没有帮助

【问题讨论】：

标签： asp.net-mvc-3 charts

【解决方案1】：

我发现了一些有用的东西......它不是很好，但它有效

使用旧图表

使用 System.Web.UI.DataVisualization.Charting；

 public ActionResult GetRainfallChart()
    {
        Chart chart = new Chart();
        chart.BackColor = Color.Transparent;
        chart.Width = Unit.Pixel(1400);
        chart.Height = Unit.Pixel(750);

        Series series1 = new Series("Series1");
        series1.ChartArea = "ca1";
        series1.ChartType = SeriesChartType.Bar;
        series1.Font = new System.Drawing.Font("Verdana", 11f, FontStyle.Regular);
        series1.Points.Add(new DataPoint
        {
            AxisLabel = "A",
            YValues = new double[] { 100 },
            Color = Color.Green,
        });
        series1.Points.Add(new DataPoint
        {
            AxisLabel = "B",
            YValues = new double[] { 324 },
            Color = Color.Red,
        });
        series1.Points.Add(new DataPoint
        {
            AxisLabel = "C",
            YValues = new double[] { 235 },
            Color = Color.Yellow,
        });

        chart.Series.Add(series1);

        ChartArea ca1 = new ChartArea("ca1");
        ca1.BackColor = Color.Transparent;
        chart.ChartAreas.Add(ca1);

        var ms = new MemoryStream();

        chart.SaveImage(ms, ChartImageFormat.Png);
        ms.Seek(0, SeekOrigin.Begin);

        return new FileStreamResult(ms, "image/png");



    }

是的，他是对的。更多信息 System.Web.Helpers 中的图表助手在内部使用 'using DV = System.Web.UI.DataVisualization.Charting;'仅限 ASP.Net 图表控件，但访问受限。

如果您需要更多功能，最好使用 ASP.Net 图表

【讨论】：

【解决方案2】：

也许您很久以前就找到了答案，但考虑到我在搜索为图表条形着色的方法时在这个主题上发现的很少，我认为当它打开时在此处发布解决方案可能会很有用由我决定。

System.Web.Helpers.Chart的实现似乎与System.Web.UI.DataVisualization.Charting.Chart密切相关。鉴于此，我设法找到了一些关于如何配置“主题”XML 属性的线索：

public const String CHARTS_THEME = @"<Chart BackColor=""#EFEFEF"" BackGradientStyle=""TopBottom"" BorderColor=""#A0A0A0"" BorderWidth=""1"" Palette=""None"" PaletteCustomColors=""#ffcc00"" >
<ChartAreas>
<ChartArea Name=""Default"" _Template_=""All"" BackColor=""Transparent"" BackSecondaryColor=""White"" BorderWidth=""1"" BorderColor=""#A0A0A0"" BorderDashStyle=""Solid"" >
<AxisY>
<MajorGrid Interval=""Auto"" LineColor=""64, 64, 64, 64"" />    
<LabelStyle Font=""Verdana, 10pt"" />
</AxisY>
<AxisX LineColor=""#000000"">
<MajorGrid Interval=""Auto"" LineColor=""64, 64, 64, 64"" />
<LabelStyle Font=""Verdana, 10pt"" />
</AxisX>
</ChartArea>
</ChartAreas>
<Legends>
<Legend _Template_=""All"" BackColor=""Transparent"" Docking=""Bottom"" Font=""Verdana, 10pt, style=Plain"" LegendStyle=""Row"">
</Legend>
    </Legends>                          
</Chart>";

这一点的关键是定义你自己的PaletteCustomColors（我只有一种颜色）。要完成这项工作，必须将 Palette 属性设置为 None。

最后，只需在创建图表实例时使用您的主题：

Chart chart = new Chart(width: 600, height: 200, theme:CHARTS_THEME);

还可以查看 System.Web.UI.DataVisualization.Charting.Chart 的 msdn 文档以发现其他方式来设置图表样式：

http://msdn.microsoft.com/en-us/library/dd467201.aspx

【讨论】：