当前位置：文江博客话题详情

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

发布于 2024-11-03 10:25:29 字数 1116 浏览 0 评论 0 原文

我正在使用

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

原文

I'm using

System.Web.Helpers.Chart

to display charts in my MVC3 application.

@{
    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();
}

However the colors of series are picked randomly by how many series there are on the chart. Does anyone know how to set specific color to certain series?

I found Charting samples online for setting colors, but they are using the namespace

System.Web.UI.DataVisualization.Charting

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

季末如歌 2024-11-10 10:25:30

这篇博客文章介绍了如何更改系列的颜色
设置 Microsoft 图表系列颜色

如果您想使用 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>";
}

This blog article desribes how to change the colors of your series
Setting Microsoft Chart Series Colors

If you want to use the XML format instead then copy the following code where I have changed the color to Red.

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

回复收藏 0 原文

双手揣兜 2024-11-10 10:25:30

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

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

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

要更改 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>

For MVC projects I find it easier to fine tune chart appearance by putting the theme into an external XML file. E.g. you can put an XML file into your Content folder and then reference it in the Chart constructor like this:

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

You can then style all aspects, including colour Palette in the XML. The structure of the XML reflects the various classes and properties used in the a Chart instance. For guidance you can check the MSDN documentation of the classes, starting here.

For changing the ColorPallette specifically check https://crmchartguy.wordpress.com/2012/08/23/palette-custom-colors-in-charts/

This is a sample chart theme in 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>

回复收藏 0 原文

墨小沫ゞ 2024-11-10 10:25:30

我也一直在努力解决这个问题，在阅读了 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>";

I've been struggling with this as well and after reading the Microsoft documentation posted by Danny I finally found that the PaletteCustomColor attribute is the way to go. Here is an example of a theme with custom palette:

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

回复收藏 0 原文

属性 2024-11-10 10:25:30

你可以试试这个。它对我有用

Chart.Series[0].Color = System.Drawing.Color.FromArgb(31, 167, 215);

回复收藏 0 原文

看春风乍起 2024-11-10 10:25:29

如果您想自定义图表，您需要创建一个 ChartTheme。不幸的是，这些看起来有点老套……

例如。尝试设置这样的主题：

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

编辑：此链接也可能有用：

新的 asp.net 图表控件 - 它们是否可以使用MVC（最终）？

You need to create a ChartTheme if you want to customise the chart. Unfortuantely these look a little bit hacky...

Eg. try setting a theme like this:

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

You'll notice your chart looks different. If you click on ChartTheme.Green and press F12 (Go To Definition), you'll see the ChartTheme class is full of huge strings defining how the charts are styled:

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

There's a huge amount of stuff you can customise in this XML (why XML? I don't know!), though the type of chart etc. that you use will influence much of what you can do. You can find the docs for this here:

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

Edit: This link may also be useful:

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

回复收藏 0 原文

~没有更多了~