如何在MVC 3中設置圖表系列顏色？

Question

我使用

System.Web.Helpers.Chart

顯示在我MVC3應用圖表。

@{ 
    var myChart = new Chart(width: 600, height: 400) 
     .AddTitle("Resource Utilization in Projects in Week 1") 
     .AddSeries(
      name: "Project1", 
      chartType: "StackedColumn", 
      xValue: new[] { "W1", "W2", "W3", "W4", "W5" }, 
      yValues: new[] { 80, 60, 40, 20, 10} 
     ) 
     .AddSeries(
      name: "Project2", 
      chartType: "StackedColumn", 
      xValue: new[] { "W1", "W2", "W3", "W4", "W5" }, 
      yValues: new[] { 10, 10, 0, 10, 10 } 
     ) 
     .AddSeries(
      name: "Available", 
      chartType: "StackedColumn", 
      xValue: new[] { "W1", "W2", "W3", "W4", "W5" }, 
      yValues: new[] { "10", "30", "50", "70", "80" } 
     ) 
     .AddLegend();   

     myChart.Write(); 
} 

但是，系列的顏色是隨機選取圖表上有多少個系列。有誰知道如何爲特定系列設置特定的顏色？

我發現圖表樣品在線設置顏色，但他們使用的命名空間

System.Web.UI.DataVisualization.Charting

Answer 1

你需要的，如果你想創建一個ChartTheme自定義圖表。不幸的是，這些看起來有點hacky ...

例如。嘗試設置一個主題是這樣的：

var myChart = new Chart(width: 600, height: 400, theme: ChartTheme.Green) 

您會發現您的圖表看起來不一樣。如果你點擊ChartTheme.Green並按F12（轉到定義），你會看到ChartTheme類是充滿巨大的字符串定義圖表是如何稱呼的：

public const string Blue = @"<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"" /> 
    </Legends> 
    <BorderSkin SkinStyle=""Emboss"" /> 
    </Chart>"; 

有可以自定義的東西，數額巨大這個XML（爲什麼是XML？我不知道！），儘管你使用的圖表類型會影響你可以做的很多事情。你可以找到的文檔此位置：

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

編輯：此鏈接也可能是有用的：

New asp.net charting controls - will they work with MVC (eventually)?

Answer 2

此博客文章desribes如何更改系列的顏色 Setting Microsoft Chart Series Colors

如果您想要使用XML格式，請將以下代碼複製到wh此前我已將顏色更改爲紅色。

public class CustomChartTheme 
{ 
    public const string Red = @"<Chart BackColor=""#58A5CB"" BackGradientStyle=""TopBottom"" BackSecondaryColor=""White"" BorderColor=""26, 59, 105"" BorderlineDashStyle=""Solid"" BorderWidth=""2"" Palette=""None"" PaletteCustomColors=""Red""> 
<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"" /> 
</Legends> 
<BorderSkin SkinStyle=""Emboss"" /> </Chart>"; 
} 

Answer 3

你可以試試這個。它爲我的工作

chart.Series [0] .Color = System.Drawing.Color.FromArgb（31，167，215）;

Answer 4

我一直在爲此苦苦掙扎，在閱讀由Danny發佈的Microsoft文檔後，我終於發現PaletteCustomColor屬性是最好的選擇。這是自定義的調色板主題的例子：

const string blue = @"<Chart BackColor=""#D3DFF0"" BackGradientStyle=""TopBottom"" BackSecondaryColor=""White"" BorderColor=""26, 59, 105"" BorderlineDashStyle=""Solid"" BorderWidth=""2"" Palette=""None"" 
PaletteCustomColors=""97,97,97; 209,98,96; 168,203,104; 142,116,178; 93,186,215; 255,155,83; 148,172,215; 217,148,147; 189,213,151; 173,158,196; 145,201,221; 255,180,138"" > 
    <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"" /> 
    </Legends> 
    <BorderSkin SkinStyle=""Emboss"" /> 
</Chart>"; 

Answer 5

對於MVC項目中，我發現它通過將主題到外部XML文件更加容易微調圖表的外觀。例如。你可以把一個XML文件到您的內容文件夾，然後在圖表構造像這樣引用它：

var myChart = new Chart(width: 600, height: 200, themePath: "/Content/chart/ChartTheme.xml") 

然後，您可以風格各個方面，包括在XML調色板。 XML的結構反映了Chart實例中使​​用的各種類和屬性。有關指導，您可以檢查課程的MSDN文檔，從here開始。

爲了改變ColorPallette專門檢查https://crmchartguy.wordpress.com/2012/08/23/palette-custom-colors-in-charts/

這是一個示例圖表主題XML：

<?xml version="1.0" encoding="utf-8" ?> 
<Chart BackColor="#ffffff" 
    BorderStyle="None" 
    Palette="None" 
    PaletteCustomColors="#0033cc; #ff3300"> 
    <ChartAreas>  
    <ChartArea Name="Default" _Template_="All" 
      BackColor="White" 
      ShadowColor="#aaaaaa" 
      ShadowOffset="2" 
      BorderColor="#cccccc" 
      BorderDashStyle="Solid" 
      Position="-1,0,100,75">  
     <AxisY LineColor="#cccccc" IsLabelAutoFit="false" IsMarginVisible="true">   
     <MajorGrid Interval="Auto" LineColor="#cccccc" /> 
     <MajorTickMark LineColor="#aaaaaa" LineWidth="1" LineDashStyle="Solid" /> 
     <LabelStyle Font="Helvetica Neue, 10 px" />  
     </AxisY>  
     <AxisX LineColor="#cccccc" IsLabelAutoFit="false" IsMarginVisible="true">   
     <MajorGrid LineColor="#cccccc" /> 
     <MajorTickMark LineColor="#666666" /> 
     <LabelStyle Font="Helvetica Neue, 10 px" Format="d-M-yyyy"/>  
     </AxisX>  
    </ChartArea> 
    </ChartAreas> 
    <Legends>  
     <Legend _Template_="All" 
     Alignment="Center" 
     BackColor="Transparent" 
     Docking="Bottom" 
     Font="Helvetica Neue, 12 px" 
     IsTextAutoFit ="False" 
     LegendStyle="Row"> 
    </Legend> 
    </Legends> 
</Chart>