asp.Net MVC Как установить цвета для каждого столбца на диаграмме?

Я использую System.Web.Helpers в приложении MVC.

Приложение создает несколько диаграмм, и после многих попыток я, наконец, заставил его работать.

foreach (var m in model[0].HistoryValues)
{

    var chart = new Chart(width: 600, height: 400)
    .AddTitle(m.LastUpdateSTR)
    .AddSeries(
        name: m.LastUpdateSTR,
        xValue: new[] { "Server", "Db", "Tickets" },
        yValues: new[] { m.ServerPerformance, m.Databaseperformance, m.SoldTicketsLastThirtyMin == 0 ? 10 : m.SoldTicketsLastThirtyMin }        
    );

    m.Bytes = chart.GetBytes("jpeg");
};

Результат:

введите здесь описание изображения

Дело в том, что я хочу иметь возможность менять цвет на полосах. вот так:

введите здесь описание изображения

Я не смог найти каких-либо свежих статей о том, как это сделать. Те, которые я нашел, показывают мне, как установить тему на графике, но как мне установить определенный цвет на каждом столбце?


c# charts asp.net-mvc system.web
person ThunD3eR    schedule 04.04.2016    source источник
comment
Согласно документам, это должно быть chart.GetBytes("jpeg")   -  person spender    schedule 04.04.2016
comment
msdn. microsoft.com/en-us/library/ указывает, что значение по умолчанию — "jpeg". Вы используете "jpg", что может вызвать проблемы.   -  person spender    schedule 04.04.2016
comment
Извините, что я имел в виду вопрос. Вы правы, я обновил   -  person ThunD3eR    schedule 04.04.2016

Ответы (2)


arrow_upward
2
arrow_downward

Chart Helper - это MVC, к сожалению, не предоставляет никаких свойств для простой настройки каждого из ваших отдельных столбцов/полей. В результате вам придется прибегнуть к использованию отвратительной строковой темы как показано ниже:

var theme = @"<Chart BackColor="Transparent">
                  <ChartAreas>
                       <ChartArea Name="Default" BackColor=""Transparent"></ChartArea>
                  </ChartAreas>
              </Chart>";

А затем примените указанную тему к существующему Chart :

var chart = new Chart(width: 600, height: 400, theme: theme)

Тем не менее, эти темы кажутся довольно ограниченными и могут не иметь необходимой функциональности, чтобы иметь возможность ориентироваться на отдельные панели (по крайней мере, легко). Вы можете рассмотреть возможность поиска альтернативной библиотеки или стороннего компонента, такого как HighCharts, если вам это нужно. вид функциональности.

person Rion Williams    schedule 04.04.2016
comment
Вероятно, я выберу HighCharts. Только жаль, что функционала не хватает. - person ThunD3eR; 04.04.2016

arrow_upward
1
arrow_downward

Диаграмма поставляется с предустановленным набором из 5 тем. Если вам нужны собственные цвета, вы можете создать собственную тему. Это в основном такой XML.

<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" /><BorderSkin SkinStyle="Emboss" />
</Chart>

Итак, для начала вы можете создать класс, который имеет эту строку

public static class MyChartTheme
{
    public const string MyCustom = "<Chart BackColor=\"White\" BackGradientStyle=\"TopBottom\" BackSecondaryColor=\"White\" BorderColor=\"26, 59, 105\" BorderlineDashStyle=\"Solid\" BorderWidth=\"2\" Palette=\"BrightPastel\">\r\n    <ChartAreas>\r\n        <ChartArea Name=\"Default\" _Template_=\"All\" BackColor=\"64, 165, 191, 228\" BackGradientStyle=\"TopBottom\" BackSecondaryColor=\"White\" BorderColor=\"64, 64, 64, 64\" BorderDashStyle=\"Solid\" ShadowColor=\"Transparent\" /> \r\n    </ChartAreas>\r\n    <Legends>\r\n        <Legend _Template_=\"All\" BackColor=\"Transparent\" Font=\"Trebuchet MS, 8.25pt, style=Bold\" IsTextAutoFit=\"False\" /> \r\n    </Legends>\r\n    <BorderSkin SkinStyle=\"Emboss\" /> \r\n  </Chart>";
}

и использовать его.

var chart= new Chart(width: 600, height: 400, theme: MyChartTheme.MyCustom)

Теперь вы можете сохранить эту XML-структуру в реальном XML-файле, прочитать ее и использовать. Вам нужно написать код C#, чтобы прочитать файл и вернуть его строковую версию.

Вы также можете использовать библиотеки для построения диаграмм JavaScript, такие как Chart.js или Highcharts, и они позволят вам более широко настраивать диаграммы.

person Shyju    schedule 04.04.2016
comment
Спасибо за помощь. vent с ответом @Rion Williams, который выглядит так же, как этот. - person ThunD3eR; 04.04.2016