如何设置图表系列颜色MVC 3？ [英] How to Set Chart Series Colors in MVC 3?

问题描述

我用

  

System.Web.Helpers.Chart

在我MVC3应用程序中显示图表。

  @ {
    VAR myChart =新图（宽度：600，高度：400）
        .AddTitle（资源开发利用项目在1周）
        .AddSeries（
            名称：PROJECT1
            图图表：StackedColumn
            xValue：新[] {W1，W2，W3，W4，W5}，
            yValues​​：新[] {80，60，40，20，10}
        ）
        .AddSeries（
            名称：Project2的
            图图表：StackedColumn
            xValue：新[] {W1，W2，W3，W4，W5}，
            yValues​​：新[] {10，10，0，10，10}
        ）
        .AddSeries（
            名称：可用，
            图图表：StackedColumn
            xValue：新[] {W1，W2，W3，W4，W5}，
            yValues​​：新[] {10，30，50，70，80}
        ）
        .AddLegend（）;        myChart.Write（）;
}
 

不过系列的颜色是由多少个系列有图表上随机挑选。有谁知道具体怎么设置颜色为某些系列？

我发现图表样本在线设置颜色，但他们使用的命名空间。

  

System.Web.UI.DataVisualization.Charting

解决方案

您需要创建一个ChartTheme如果你想自定义图表。 Unfortuantely这些看起来有点哈克...

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

  VAR myChart =新图（宽度：600，高度：400，主题：ChartTheme.Green）
 

您会发现您的图表看起来不一样。如果你点击 ChartTheme.Green 和preSS F12（转到定义），你会看到ChartTheme类是满弦巨大的定义图表是如何病急乱投医

 公共常量字符串蓝= @＆LT;图表背景色=＃D3DFF0BackGradientStyle =TopBottomBackSecondaryColor =白BORDERCOLOR =26， 59，105，BorderlineDashStyle =固体，边框宽度=2调色板=BrightPastel＆GT;
    ＆LT; ChartAreas＆GT;
        ＆LT; ChartArea NAME =默认_template _ =全部背景色=64，165，191，228，BackGradientStyle =TopBottomBackSecondaryColor =白BORDERCOLOR =64， 64，64，64BorderDashStyle =实则shadowColor =透明/＆GT;
    ＆LT; / ChartAreas＆GT;
    ＆LT;传说与GT;
        ＆LT;传奇_template _ =全部背景色=透明，字体=投石机MS，8.25pt，风格=粗体IsTextAutoFit =假/＆GT;
    ＆LT; /传说与GT;
    ＆LT; BorderSkin SkinStyle =浮雕，/＆GT;
  ＆LT; /图＆gt;中;
 

有就是你可以在这个XML（XML为什么？我不知道！）定制的东西，数额巨大，但您使用的图表类型等，都会影响很多你可以做什么。你可以找到的文档此位置：

<一个href=\"http://msdn.microsoft.com/en-us/library/dd456696.aspx\">http://msdn.microsoft.com/en-us/library/dd456696.aspx

修改：这个链接也可能是有用的：

<一个href=\"http://stackoverflow.com/questions/319835/new-asp-net-charting-controls-will-they-work-with-mvc-eventually/\">New asp.net图表控件 - 他们将与MVC工作（最终）

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

解决方案

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

这篇关于如何设置图表系列颜色MVC 3？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！