使用 CODE BEHIND 创建堆积条形柱形图

Question

我需要创建一个如图所示的堆积柱形图。 X 轴：组件名称 Y 轴：错误数 Stacks ：对于每个组件，我需要创建堆叠图表，告诉我： ---> 对于每个组件类别（音频/视频），我需要说我有 x 个 HIGH、MEDIUM、LOW、SHOWSTOPPER 错误。

我有以下格式的数据： 类别名称 || BUG 类型：数字 BUG 类型：数字 BUG 类型：数字 BUG 类型：数字

样本数据： 音频::=> 高：30 中：17 低：1 视频::=> 高：1 外围设备::=> 中：15 高：14 低：1 炫耀者：1 传感器::=> 中：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 来创建此堆叠图表？

Answer 1

您可以使用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 }) }
                       });

下面是代码的结果：

您还可以看到 Highcharts here 的现场演示。

有关如何安装和使用 DotNet.Highcharts 库的更多信息，您可以在 home page at CodePlex 上找到。您可以在example project 中找到更多示例代码。