Muti-bar Spalte Diagramm mit Legende aus Datatable

Question

Ich versuche, eine Mutibar-Säulendiagramm mit Legende zu plotten. Das ist mein Code. Der Code scheint zu funktionieren, fügt jedoch keine Legende in einem geeigneten Format hinzu. Ich füge Screenshots meiner Datentabelle und der Ausgabe von meinem Code hinzu. Die Legende sollte verschiedene Arten von Prioritäten zeigen, aber es zeigt überall "Legendentext".

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

Try canvasjs Diagramm zu verwenden.

Verwenden Webservice für die Bindungsdaten

<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/