Как установить цвета серии диаграмм в MVC 3?

Я использую

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

Ответ 1

Вам нужно создать ChartTheme, если вы хотите настроить диаграмму. К несчастью, они выглядят немного взломанными...

Eg. попробуйте задать тему следующим образом:

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

Вы заметите, что ваш график выглядит по-другому. Если вы нажмете на ChartTheme.Green и нажмите F12 (Go To Definition), вы увидите, что класс 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 (в конечном итоге)?

Ответ 2

В этой статье в блоге описывается, как изменить цвета вашей серии Настройка цветов диаграмм серии 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>";
}

Ответ 3

Для проектов MVC мне легче настраивать внешний вид диаграммы, помещая тему во внешний XML файл. Например. вы можете поместить XML файл в свою папку Content и затем ссылаться на него в конструкторе Chart следующим образом:

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

Затем вы можете создавать все аспекты, включая цветовую палитру в XML. Структура XML отражает различные классы и свойства, используемые в экземпляре диаграммы. Для руководства вы можете проверить документацию 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>

Ответ 4

Я тоже борюсь с этим, и, прочитав документацию 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>";

Ответ 5

вы можете попробовать это. Его работа для меня

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