如何设置饼图切片的颜色？ ASP.NET MVC

Question

How can I set the colors of each pie slice using the Chart Class?

From what I have read I feel like i need to modify my theme, but I don't know how.

This is what i have so far.

 public ActionResult Q5Chart()
    {
        int strAgr = selected.Where(x => x.q5 == 5).Count();
        int agr = selected.Where(x => x.q5 == 4).Count();
        int neu = selected.Where(x => x.q5 == 3).Count();
        int dis = selected.Where(x => x.q5 == 2).Count();
        int strDis = selected.Where(x => x.q5 == 1).Count();

        string myTheme = @"<Chart>
                                <Series>
                                    <Series Name=""Question 5"" ChartType=""Pie"" CustomProperties=""PieLabelStyle=Disabled"">
                                    </Series>
                                </Series>
                            </Chart>";

        var Q5Chart = new Chart(width: 450, height: 300, theme: myTheme)
        .AddSeries(
        chartType: "Pie",
        name: "Question 5",
        xValue: new[] { "Strongly Agree", "Agree", "Neutral", "Strongly Disagree", "Disagree" },
        yValues: new[] { strAgr,agr,neu,dis,strDis }).AddLegend();


        return File(Q5Chart.ToWebImage().GetBytes(), "image/jpeg");
    }

Answer 1

Chart class allows you to use one of the ChartThemes available. But each theme will give you only the predefined set of colors. You can't do customization like different colors for specific slices of your pie charts.

You can try using some javascript charting libraries like Chart.js or Highcharts and they will let you customize colors as you want.

EDIT : If you want, you can create a custom theme. It is basically a string version of an XML structure like this.

<Chart BackColor="#D3DFF0" BackGradientStyle="TopBottom" BackSecondaryColor="White" BorderColor="26, 59, 105" BorderlineDashStyle="Solid" BorderWidth="2" Palette="BrightPastel">
  <ChartAreas>
    <ChartArea Name="Default" _Template_="All" BackColor="64, 165, 191, 228" BackGradientStyle="TopBottom" BackSecondaryColor="White" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid" ShadowColor="Transparent" />
  </ChartAreas>
  <Legends>
  <Legend _Template_="All" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold" IsTextAutoFit="False" /><BorderSkin SkinStyle="Emboss" />
</Chart>

So to get started, you can create a class which has this string

public static class MyChartTheme
{
    public const string MyCustom = "<Chart BackColor=\"White\" BackGradientStyle=\"TopBottom\" BackSecondaryColor=\"White\" BorderColor=\"26, 59, 105\" BorderlineDashStyle=\"Solid\" BorderWidth=\"2\" Palette=\"BrightPastel\">\r\n    <ChartAreas>\r\n        <ChartArea Name=\"Default\" _Template_=\"All\" BackColor=\"64, 165, 191, 228\" BackGradientStyle=\"TopBottom\" BackSecondaryColor=\"White\" BorderColor=\"64, 64, 64, 64\" BorderDashStyle=\"Solid\" ShadowColor=\"Transparent\" /> \r\n    </ChartAreas>\r\n    <Legends>\r\n        <Legend _Template_=\"All\" BackColor=\"Transparent\" Font=\"Trebuchet MS, 8.25pt, style=Bold\" IsTextAutoFit=\"False\" /> \r\n    </Legends>\r\n    <BorderSkin SkinStyle=\"Emboss\" /> \r\n  </Chart>";
}

and use it.

var chart= new Chart(width: 600, height: 400, theme: MyChartTheme.MyCustom)

You can keep the xml in a real xml file and have some C# code read the content of this file and return a stringified version of that instead of hard coding the big xml string in the class.