如何設置餅圖切片的顏色？ ASP.NET MVC

Question

如何使用“圖表類”設置每個餅圖的顏色？

通過閱讀，我覺得我需要修改主題，但是我不知道該怎么做。

這是我到目前為止所擁有的。

 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類允許您使用可用的ChartThemes之一。 但是每個主題只會為您提供預定義的顏色集。 您無法為餅圖的特定部分進行自定義，例如不同的顏色。

您可以嘗試使用一些JavaScript圖表庫，例如Chart.js或Highcharts ，它們可以讓您根據需要自定義顏色。

編輯：如果需要，您可以創建一個自定義主題。 它基本上是這樣的XML結構的字符串版本。

<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>

因此，開始時，您可以創建一個包含此字符串的類

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>";
}

並使用它。

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

您可以將xml保留在真實的xml文件中，並讓一些C＃代碼讀取該文件的內容並返回該文件的字符串化版本，而不是對類中的大型xml字符串進行硬編碼。