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

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

10 голосов
/ 26 апреля 2011

Я использую

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.Диаграмма

Ответы [ 5 ]

10 голосов
/ 02 мая 2011

Вам нужно создать 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 (со временем)?

2 голосов
/ 17 сентября 2015

Для проектов 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>
2 голосов
/ 16 января 2012

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

Я тоже боролся с этим, и после прочтения документации 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>";
0 голосов
/ 03 февраля 2015

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

диаграмма. Серия [0]. Цвет = System.Drawing.Color.FromArgb (31, 167, 215);

...