在ASP.NET Web Forms中,图表的显示通常借助于一些第三方图表库,例如Google Charts、Chart.js、Highcharts等。这些库提供了用于在Web页面中创建各种类型的图表(如折线图、柱状图、饼图等)的JavaScript API。

以下是一个简单的示例,展示了如何在ASP.NET Web Forms中使用Google Charts库来创建一个简单的柱状图:

1. 引入 Google Charts 库:

   在页面的 <head> 部分引入 Google Charts库。
   <head runat="server">
       <title>Chart Example</title>
       <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   </head>

2. 创建一个 <div> 用于容纳图表:
   <body>
       <form id="form1" runat="server">
           <div id="chart_div"></div>
       </form>
   </body>

3. 在 <script> 中使用 Google Charts API:
   <script type="text/javascript">
       google.charts.load('current', { 'packages': ['bar'] });
       google.charts.setOnLoadCallback(drawChart);

       function drawChart() {
           var data = google.visualization.arrayToDataTable([
               ['Year', 'Sales', 'Expenses', 'Profit'],
               ['2014', 1000, 400, 200],
               ['2015', 1170, 460, 250],
               ['2016', 660, 1120, 300],
               ['2017', 1030, 540, 350]
           ]);

           var options = {
               chart: {
                   title: 'Company Performance',
                   subtitle: 'Sales, Expenses, and Profit: 2014-2017',
               }
           };

           var chart = new google.charts.Bar(document.getElementById('chart_div'));

           chart.draw(data, google.charts.Bar.convertOptions(options));
       }
   </script>

在上述示例中,我们使用了Google Charts库的Bar图表类型,绘制了一个简单的柱状图。你可以根据需要更改数据、图表类型以及其他选项。

请注意,此示例是一个静态的演示,实际项目中你可能需要通过服务器端代码动态生成图表数据。根据实际情况,你可能还需要在后端与数据库交互,获取数据并将其传递到前端进行图表绘制。

需要注意的是,目前在ASP.NET Web Forms中,更现代的方式是使用ASP.NET Core和JavaScript库来实现交互式和动态的图表。


转载请注明出处:http://www.zyzy.cn/article/detail/14961/ASP.NET Web Forms