帶有可數據列的Asp.net條形圖作爲X軸

Question

我在ASP.net中的圖表對象上很新穎。我有一個從SQL數據庫查詢的單行列。

+-------+-------+-------+-------+-------+-------+-------+-------+-------+-------+ 
| CPass | CFail | WPass | WFail | SPass | SFail | HPass | HFail | APass | AFail | 
+-------+-------+-------+-------+-------+-------+-------+-------+-------+-------+ 
|  3 |  0 |  0 |  0 |  3 |  0 |  5 |  2 |  0 |  0 | 
+-------+-------+-------+-------+-------+-------+-------+-------+-------+-------+ 

我想它attatch到圖表對象上的ASP.net網頁設置爲條形圖。我將如何設置系列，以便列標題是X，單行值是Y？

我覺得這應該很容易，但到目前爲止Google已經讓我失望了。

Answer 1

可以使用谷歌圖表（柱狀圖）

https://developers.google.com/chart/interactive/docs/gallery/columnchart

下面是示例代碼

https://jsfiddle.net/L80x1e0t/

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript"> 
google.charts.load('current', {packages: ['corechart', 'bar']}); 
google.charts.setOnLoadCallback(drawStacked); 

function drawStacked() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Score'); 
     data.addColumn('number', 'Frequency'); 


     data.addRows([ 
     ['CPass ', 3], 
     ['CFail ', 3], 
     ['WPass ', 0], 
     ['WFail ', 0], 
     ['HPass ', 5], 
     ['HFail ', 2], 
     ['APass ', 0], 
     ['AFail ', 0] 

     ]); 

     var options = { 
     title: 'Scoring system', 
     isStacked: true, 
     hAxis: { 
      title: 'Score', 

     }, 
     vAxis: { 
      title: 'Frequency' 
     } 
     }; 

     var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
    } 
    </script> 
    <div id="chart_div"></div> 

的小提琴