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

问题描述

我正在使用

System.Web.Helpers.Chart

System.Web.Helpers.Chart

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

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

System.Web.UI.DataVisualization.Charting

推荐答案

如果要自定义图表，则需要创建一个 ChartTheme.不幸的是，这些看起来有点 hacky...

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)

您会注意到您的图表看起来有所不同.如果您单击 ChartTheme.Green 并按 F12(转到定义)，您将看到 ChartTheme 类充满了定义图表样式的巨大字符串:

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

您可以在此 XML 中自定义大量内容(为什么是 XML?我不知道！)，尽管您使用的图表类型等会影响您可以执行的大部分操作.您可以在此处找到相关文档:

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

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

新的asp.net图表控件- 他们会使用 MVC(最终)吗?

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