带有可数据列的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> 

的小提琴