CODE BEHINDを使用した積み上げ棒グラフの作成

Question

図のように積み上げ縦棒グラフを作成する必要があります。 X軸：コンポーネント名 Y軸：バグの数 スタック：各コンポーネントについて、私に教えてくれるスタックチャートを作成する必要があります： --->各コンポーネントカテゴリ（オーディオ/ビデオ）について、私はHIGH、MEDIUM、LOW、SHOWSTOPPERのバグをx個持っています。

私は以下のフォーマットのデータを持っています： カテゴリ名|| バグTYPE：番号 バグTYPE：番号 バグTYPE：番号 バグTYPE：番号

サンプルデータ： AUDIO :: =>高 ：30 媒体：17 低：1 VIDEO :: = > 高：1 周辺:: => 媒体：15 高い：14 低：1 致命：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で行う方法を知っています。私はこれをコードビハインドでやりたいこれについてのあらゆる指摘は高く評価されます。私はまた、各スタックコンポーネント上のバグの数を表示したい

<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あります。

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にあるサンプルコードをご覧ください。