1

ASP.NET チャート コントロールを使用しており、次の例のような 2D 棒グラフを作成したいと考えています。

平面棒グラフの例

私のデータは次のようになります。

サンプルデータ

製品 A、製品 B、製品 C はページ名 (私のデータを参照) になり、色付きのバーはデバイスの種類になります。誰かが私がこれを行う方法を教えてもらえますか?

4

1 に答える 1

6

チャートコントロールが配置されていると仮定します...すべての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 を使用して、データベース データをチャートにバインドする必要があります。

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

これにより、チャート コントロールに新しいシリーズが作成されるため、マークアップ言語でシリーズを具体的に定義する必要はありません。

データを取得する別の方法は、次のように 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

于 2013-03-06T20:26:09.920 に答える