Создание столбчатой ​​диаграммы с накоплением столбцов с CODE BEHIND - PullRequest
Новая
       27

Создание столбчатой ​​диаграммы с накоплением столбцов с CODE BEHIND

2 голосов
/ 07 марта 2012

Мне нужно создать столбчатую диаграмму с накоплением, как показано на рисунке.Ось X: Имя компонента Ось Y: Количество ошибок Стеки: Для каждого компонента мне нужно создать составные диаграммы, которые сообщают мне: ---> Для каждой категории компонентов (Аудио / Видео) мне нужно сказать, что у меня есть номер xошибок HIGH, MEDIUM, LOW, SHOWSTOPPER.

У меня есть данные в формате: Категория NAME ||Тип ошибки: цифры Тип ошибки: цифры Тип ошибки: цифры Тип ошибки: цифры

Пример данных: AUDIO :: => высокий: 30 средний: 17 низкий: 1 видео: => высокий: 1 периферийный ::=> средний: 15 высокий: 14 низкий: 1 showtopper: 1 SENSOR :: => средний: 2

Эти данные, показанные выше, были созданы с некоторыми запросами LINQ.Так что нет в словаре.Код для создания данных выше: 

var dbQuery = from bug in RawListData
              group bug by new { bug.category, bug.customer_priority } into grouped
              select new { 
                  Category = grouped.Key.category,
                  Priority = grouped.Key.customer_priority,
                  Count = grouped.Count()
              };

            var query = dbQuery.ToLookup(result => result.Category,
                                         result => new { result.Priority, result.Count });


            foreach (var result in query)
            {
                //Console.WriteLine("{0}: ", result.Key);
                System.Diagnostics.Debug.WriteLine(" : ", result.Key);
                foreach (var subresult in result)
                {
                    //Console.WriteLine("  {0}: {1}", subresult.Priority, subresult.Count);
                    System.Diagnostics.Debug.WriteLine("  {0}: {1}", subresult.Priority, subresult.Count);
                }
            }

Обратите внимание, что в некоторых категориях нет значений для каждого из типов ошибок.

Я знаю, как это сделать в XAML.Я хочу сделать это в «код позади».Любые указатели на это будут оценены.Код, который я использовал для создания графика, прост: XAML: 

<asp:Chart ID="Chart2" runat="server" ImageLocation="~/FolderLocation/Chart_#SEQ(1000,0)" ImageStorageMode="UseImageLocation" ImageType="Png" IsSoftShadows="true">

      <series>
        <asp:Series Name="Championships" YValueType="Int32" ChartType="StackedColumn" > 
         <Points> 
            <asp:DataPoint AxisLabel="Audio" YValues="17" /> 
            <asp:DataPoint AxisLabel="Video" YValues="15" /> 
            <asp:DataPoint AxisLabel="Peripheral" YValues="6" />            
         </Points> 
        </asp:Series> 
        <asp:Series Name="Championships2" YValueType="Int32" ChartType="StackedColumn" > 
         <Points> 
            <asp:DataPoint AxisLabel="Audio" YValues="2" /> 
            <asp:DataPoint AxisLabel="Video" YValues="5" /> 
            <asp:DataPoint AxisLabel="Peripheral" YValues="16" /> 
         </Points> 
        </asp:Series> 
        <asp:Series Name="Championships3" YValueType="Int32" ChartType="StackedColumn" > 
         <Points> 
            <asp:DataPoint AxisLabel="Audio" YValues="10" /> 
            <asp:DataPoint AxisLabel="Video" YValues="3" /> 
            <asp:DataPoint AxisLabel="Peripheral" YValues="16" /> 

         </Points> 
        </asp:Series> 
        <asp:Series Name="Championships4" YValueType="Int32" ChartType="StackedColumn" > 
         <Points> 
            <asp:DataPoint AxisLabel="Audio" YValues="10" /> 
            <asp:DataPoint AxisLabel="Video" YValues="3" /> 
            <asp:DataPoint AxisLabel="Peripheral" YValues="16" /> 
         </Points> 
        </asp:Series> 
      </series>
            <chartareas>
                <asp:ChartArea Name="ChartArea1">
                    <Area3DStyle Enable3D="True" />
                </asp:ChartArea>
            </chartareas>
        </asp:Chart>

Я также хотел бы отобразить количество ошибок в каждом компоненте стека.

Как создать эту диаграмму с накоплением с помощьюписать код, а не в XAML?

1 Ответ

6 голосов
/ 07 марта 2012

Вы можете использовать Highcharts , которые являются чистым JavaScript, и они более интерактивны, чем диаграммы Microsoft.Также их легко создать в коде с помощью библиотеки DotNet.Highcharts .Вот код для создания столбчатой ​​диаграммы с накоплением: 

Highcharts chart = new Highcharts("chart")
            .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column })
            .SetTitle(new Title { Text = "Stacked column chart" })
            .SetXAxis(new XAxis { Categories = new[] { "Championships 1", "Championships 2", "Championships 3", "Championships 4" } })
            .SetPlotOptions(new PlotOptions { Column = new PlotOptionsColumn { Stacking = Stackings.Normal } })
            .SetSeries(new[]
                       {
                           new Series { Name = "Audio", Data = new Data(new object[] { 17, 2, 10, 10 }) },
                           new Series { Name = "Video", Data = new Data(new object[] { 15, 5, 3, 3 }) },
                           new Series { Name = "Peripheral", Data = new Data(new object[] { 6, 16, 16, 16 }) }
                       });

И вот результат из кода: This is the stacked column chart

Также вы можете увидеть живую демонстрацию Highcharts здесь .

Подробнее об установке и использовании библиотеки DotNet.Highcharts вы можете найти на домашней странице CodePlex .Больше примеров кода вы можете найти в примере проекта .

...