如何在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>