CompositeChart for ASP.NET Web forms
データ連結で共有グラフの描画
タスク別ヘルプ > 共有円グラフの作成 > データ連結で共有グラフの描画

このトピックでは、CompositeChartコントロールを連結して、共有円グラフ系列をレンダリングする方法を示します。コンポジットチャートコントロールをフォームに追加し、次の手順を実行します。

デザイナの場合

  1. スマートタグをクリックして［タスク］メニューを開きます。
  2. ［データソースの選択］ドロップダウンボタンをクリックし、［新しいデータソース］を選択します。
  3. データソース構成ウィザードで、［SQLデータベース］を選択し、［OK］をクリックします。
  4. ［新しい接続］ボタンをクリックして［接続の追加］ダイアログを開きます。
  5. ［データソース］をMicrosoft Accessデータベースファイルに変更します。
  6. ［データベースファイル名］としてC1NWind.mdbを選択し、［OK］をクリックして［次へ］をクリックします。
  7. 接続文字列を保存し、［カスタムSQLステートメントまたはストアドプロシージャを指定する］オプションを選択し、［次へ］をクリックします。
  8. データソース構成ウィザードで、以下のSQLステートメントを追加します。
    select top 5 CategoryName, sum(ProductSales) as Sales from (SELECT DISTINCTROW 
Categories.CategoryName as CategoryName, Products.ProductName, 
Sum([Order Details Extended].ExtendedPrice) AS ProductSales FROM Categories 
INNER JOIN (Products INNER JOIN (Orders INNER JOIN [Order Details Extended] 
ON Orders.OrderID = [Order Details Extended].OrderID) ON Products.ProductID 
= [Order Details Extended].ProductID) ON Categories.CategoryID = Products.CategoryID 
WHERE (((Orders.OrderDate) Between #1/1/95# And #12/31/95#)) GROUP BY 
Categories.CategoryID, Categories.CategoryName, Products.ProductName ORDER BY 
Products.ProductName) group by CategoryName
  9. ［次へ］をクリックし、［完了］をクリックします。

ソースビューの場合

フォームに次のコードを追加して、SqlDataSourceを初期化および構成します。

ソースビュー
コードのコピー 
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:C1NWindConnectionString2 %>"
ProviderName="<%$ ConnectionStrings:C1NWindConnectionString2.ProviderName %>"
SelectCommand="select top 5 CategoryName, sum(ProductSales) as Sales from (SELECT
DISTINCTROW Categories.CategoryName as CategoryName, Products.ProductName, Sum([Order
Details Extended].ExtendedPrice) AS ProductSales FROM Categories INNER JOIN (Products
INNER JOIN (Orders INNER JOIN [Order Details Extended] ON Orders.OrderID = [Order
Details Extended].OrderID) ON Products.ProductID = [Order Details Extended].ProductID)
ON Categories.CategoryID = Products.CategoryID WHERE (((Orders.OrderDate) Between
#1/1/95# And #12/31/95#)) GROUP BY Categories.CategoryID, Categories.CategoryName,
Products.ProductName ORDER BY Products.ProductName) group by CategoryName">
</asp:SqlDataSource>

フォームに次のコードを追加して、CompositeChartコントロールを初期化および連結します。

ソースビュー
コードのコピー 
<cc1:C1CompositeChart runat="server" ID="CompositeChart1" Culture="en-US"
    DataSourceID="SqlDataSource1" Height="475px" Width="756px">
     <DataBindings>
     <cc1:C1CompositeChartBinding Type="SharedPie" Center="200, 140" PieSeriesDataField="Sales" Radius="80"
    PieSeriesLabelField="CategoryName" SharedPieGroup="A" />
     <cc1:C1CompositeChartBinding Type="SharedPie" Center="400, 140" PieSeriesDataField="Sales" Radius="80"
    PieSeriesLabelField="CategoryName" SharedPieGroup="B" />
     <cc1:C1CompositeChartBinding Type="SharedPie" Center="200, 320" PieSeriesDataField="Sales" Radius="80"
    PieSeriesLabelField="CategoryName" SharedPieGroup="A" />
     <cc1:C1CompositeChartBinding Type="SharedPie" Center="400, 320" PieSeriesDataField="Sales" Radius="80"
    PieSeriesLabelField="CategoryName" SharedPieGroup="B" />
     </DataBindings>
    </cc1:C1CompositeChart>

このトピックの作業結果

次の図は、共有円グラフとしてレンダリングされたコンポジットチャートを示します。

 

関連トピック
データ連結

 

 

Copyright © GrapeCity, Inc. All rights reserved.