データテーブルの凡例付き無作為の棒グラフ

Question

凡例を含むmutibar縦棒グラフをプロットしようとしています。これは私のコードです。コードは動作しているようですが、適切な形式で凡例を追加していません。データテーブルのスクリーンショットとコードからの出力を追加しています。伝説にはさまざまなタイプの優先順位が表示されますが、どこにでも「伝説のテキスト」が表示されるはずです。

Output

Datatable

//Plotting Matrix Chart 
     chartMatrix.Visible = true; 
     LoadChartData(dtHourvsPriorityMatrix); 
     chartMatrix.Series["Priority"].ChartType = SeriesChartType.Column; 
     chartMatrix.Series["Priority"]["DrawingStyle"] = "Emboss"; 
     //chartMatrix.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true; 
     chartMatrix.Series["Priority"].IsValueShownAsLabel = true; 

     // Create a new legend called "Legend". 
     chartMatrix.Legends.Add(new Legend("Legend")); 

     // Set Docking of the Legend chart to the Default Chart Area. 
     chartMatrix.Legends["Legend"].DockedToChartArea = "ChartAreaF"; 

     // Assign the legend to Series=Priority. 
     chartMatrix.Series["Priority"].Legend = "Legend"; 
     chartMatrix.Series["Priority"].IsVisibleInLegend = true; 

     LegendCellColumn lcc = new LegendCellColumn("Priority", LegendCellColumnType.Text, "LEGENDTEXT"); 
     lcc.HeaderFont = new System.Drawing.Font("Trebuchet MS", 12F, System.Drawing.FontStyle.Bold); 
     chartMatrix.Legends["Legend"].CellColumns.Add(lcc); 


private void LoadChartData(DataTable initialDataSource) 
    { 
     for (int i = 1; i < initialDataSource.Columns.Count; i++) 
     { 
      Series series = new Series(); 
      foreach (DataRow dr in initialDataSource.Rows) 
      { 
       int y = (int)dr[i]; 
       series.Points.AddXY(dr["Hour"].ToString(), y); 
      } 
      chartMatrix.Series.Add(series); 
     } 
    } 

Answer 1

チャートcanvasjs使用してみてください。

データバインディングの使用Webサービス

<script type="text/javascript"> 
     $(document).ready(function() { 
      var district = $('#ContentPlaceHolder1_hiddistrict').val(); 
      var assembly = $('#ContentPlaceHolder1_hidassembly').val(); 
      $.ajax({ 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       url: "../WebMyVoterService.asmx/GenderWise", 
       data: '{"districtid":"' + district + '","assembly" :"' + assembly + '" }', 
       processData: false, 
       success: OnSuccess, 
       failure: function (response) { 
        alert(response); 
       }, 
       error: function (response) { 
        alert(response); 
       } 
      }); 



      function OnSuccess(response) { 
       var dpmale = []; 
       var dpfemale = []; 
       for (var i = 0; i < response.d.length; i++) { 
        var obj = response.d[i]; 
        var datamale = 
        { 
         y: parseInt(obj.male), 
         label: obj.boothno, 

        }; 
        var datafemale = 
        { 
         y: parseInt(obj.female), 
         label: obj.boothno, 

        }; 
        dpmale.push(datamale); 
        dpfemale.push(datafemale); 
       } 


       var chart = new CanvasJS.Chart("chartContainerbar", { 

        animationEnabled: true, 
        axisX: { 
         interval: 1, 
         labelFontSize: 10, 
         lineThickness: 0, 

        }, 
        axisY2: { 
         valueFormatString: "0", 
         lineThickness: 0, 
         labelFontSize: 10, 
        }, 
        toolTip: { 
         shared: true 
        }, 
        legend: { 
         verticalAlign: "top", 
         horizontalAlign: "center", 
         fontSize: 10, 
        }, 

        data: [{ 

         type: "stackedBar", 
         showInLegend: true, 
         name: "Male", 
         axisYType: "secondary", 
         color: "#f8d347", 
         dataPoints: dpmale 

        }, 
        { 

         type: "stackedBar", 
         showInLegend: true, 
         name: "Female", 
         axisYType: "secondary", 
         color: "#6ccac9", 

         dataPoints: dpfemale 

        } 
        ] 
       }); 
       chart.render(); 
      } 

     }); 
    </script> 

URL：http://canvasjs.com/