asp.net 柱形图

在vs中，如果要使用柱形图，我们大多数使用第三方提供的插件，所以必须要引用样式，这里我使用的是Highcharts-4.1.9插件，百度一下就可以下载到。

关键的js代码：

 <script src='/images/loading.gif' data-original="../Highcharts-4.1.9/js/jquery-1.8.2.min.js"></script>    <style type="text/css">    </style>    <script type="text/javascript">      $(function () {        $('#container').highcharts({          chart: {            type: 'column'          },          title: {            text: '各科室出院人次统计'          },          subtitle: {            text: '柱形图'          },          xAxis: {            type: 'category',            labels: {              rotation: -45,              style: {                fontSize: '13px',                fontFamily: 'Verdana, sans-serif'              }            }          },          yAxis: {            min: 0,            title: {              text: '出院人次'            }          },          legend: {            enabled: false          },          tooltip: {            pointFormat: '{series.name}: <b>{point.y}</b><br/>'          },          series: <%= returnValue %>,          dataLabels: {            enabled: true,            rotation: 0,            color: '#FFFFFF',            align: 'center',            format: '{point.y}', // one decimal            y: 10, // 10 pixels down from the top            style: {              fontSize: '13px',              fontFamily: 'Verdana, sans-serif'            }          }        }]      });      });      </script>

.net后台获取数据库数据填充：

public string returnValue = "";public string containerHeight = "400px";//关键性代码DataTable dt = ((DataSet)rs).Tables[0];        if (dt.Rows.Count > 0)        {          if (dt.Rows.Count > 4)          {            containerHeight = (dt.Rows.Count * 50).ToString() + "px";          }          else          {            containerHeight = "200px";          }          string dataY = "[{name: '总费用',data: [";          foreach (DataRow dr in dt.Rows)          {            dataY += "['" + dr["名称"].ToString() + "'," + dr["总费用"].ToString() + "]" + ",";          }          returnValue = dataY + "]";        }

大功告成，柱形图数据填充结束。

原标题：asp.net 柱形图

关键词：ASP.NET