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。不幸的是，这些看起来有点笨拙......

EG。尝试设置这样的主题：

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

这篇博客文章描述了如何改变系列的颜色 Setting Microsoft Chart Series Colors

如果您想使用XML格式，请复制以下代码，我将颜色更改为红色。

    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

对于MVC项目，我发现通过将主题放入外部XML文件可以更轻松地微调图表外观。例如。您可以将XML文件放入Content文件夹，然后在Chart构造函数中引用它，如下所示：

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

然后，您可以设置所有方面的样式，包括XML中的调色板。 XML的结构反映了Chart实例中使用的各种类和属性。有关指导，您可以从here开始查看类的MSDN文档。

要更改ColorPallette，请特别检查https://crmchartguy.wordpress.com/2012/08/23/palette-custom-colors-in-charts/

这是XML中的示例图表主题：

RewriteEngine On
RewriteCond %{HTTP_COOKIE} cookie_name [NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

RewriteRule .* /redirect.php [L]

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

你可以试试这个。它为我工作

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

如何在MVC 3中设置图表系列颜色？

5 个答案: