如何使用ASP.NET图表控件2D条形图

Question

我正在使用ASP.NET图表控件,并希望像这个示例一样创建一个二维条形图:

我的数据如下:

产品A,产品B,产品C将是页面名称(请参阅我的数据),彩色条将是设备类型.任何人都可以告诉我如何做到这一点吗？

Answer 1

假设你有图表控件......包括所有的dll和库.你需要首先...:

将图表添加到ASP.NET页面

<asp:Chart ID="Chart1" runat="server"> 
   <series> 
      <asp:Series Name="Series1"> 
      </asp:Series> 
   </series> 
   <chartareas> 
      <asp:ChartArea Name="ChartArea1"> 
      </asp:ChartArea> 
   </chartareas> 
</asp:Chart>

您只需将图表控件从工具箱拖到页面上即可完成此操作.

当通过客户端浏览器访问时,图表控件呈现一个和一个ChartHttpHandler - 处理请求.

接下来,您需要指定图表数据.包括X轴和Y轴-X表示值的位置 - Y值表示线的位置或列的高度.

然后,您需要使用DataBindTable将数据库数据绑定到Chart ....

Using myConnection As New SqlConnection 
   myConnection.ConnectionString = ConfigurationManager.ConnectionStrings("NorthwindConnectionString").ConnectionString 

   Dim myCommand As New SqlCommand 
   myCommand.Connection = myConnection 
   myCommand.CommandText = "SELECT CategoryName, COUNT(*) as ProductCount FROM Products p INNER JOIN Categories c ON c.CategoryID = p.CategoryID GROUP BY CategoryName ORDER BY CategoryName" 

   myConnection.Open() 
   Dim myReader As SqlDataReader = myCommand.ExecuteReader() 

   chtCategoriesProductCount.DataBindTable(myReader, "CategoryName")

   myReader.Close() 
   myConnection.Close() 
End Using 

这将在Chart Control中创建一个新系列,因此您无需在标记语言中专门定义系列.

获取数据的另一种方法是通过DataSource属性......如下所示.这需要明确定义图表的系列.您还需要指定线条或条形图.

第一部分看起来像:

<asp:Chart ID="chtCategoriesProductCountBarChart" runat="server"> 
   <Titles> 
      <asp:Title Text="Number of Products in Categories"></asp:Title> 
   </Titles> 

   <Series> 
      <asp:Series Name="Categories" ChartType="Line" ChartArea="MainChartArea" BorderWidth="5" Color="Red"></asp:Series> 
   </Series>

   <ChartAreas> 
      <asp:ChartArea Name="MainChartArea"> 
      </asp:ChartArea> 
   </ChartAreas> 
</asp:Chart>

绑定代码:

chtCategoriesProductCountBarChart.Series("Categories").XValueMember = "CategoryName" 
chtCategoriesProductCountBarChart.Series("Categories").YValueMembers = "ProductCount" 

chtCategoriesProductCountBarChart.DataSource = myReader 
chtCategoriesProductCountBarChart.DataBind() 

我会假设您知道将数据放在何处,如图表控制器.祝好运...

哦,这是我的资源......那里也应该有很多其他帮助..干杯

http://www.4guysfromrolla.com/articles/072209-1.aspx