ASP.NET Web API コントロール
FlexPieの画像エクスポート
サービス > 画像サービス > エクスポートサービス > FlexPieの画像エクスポート

このセクションでは、クライアントアプリケーションを通してWeb APIサービスプロジェクトを呼び出し、FlexPieコントロールを画像としてエクスポートするための関数を追加する方法を説明します。

手順1：サービスを呼び出す

手順2：クライアントプロジェクトを実行する

次の図は、上記の手順を実行した後のFlexPieを示しています。

手順1：サービスを呼び出す

Web APIサービスを呼び出すには、次の手順を実行します。

  1. ComponentOne Web APIクライアントJavaScriptファイルとその参照をMVCまたはHTMLプロジェクトに追加します（詳細な手順については、「Web APIクライアントJavaScriptの追加」を参照してください）。
  2. Client JavaScript Helperを使用して、エクスポート機能を実装するための関数を作成します。

    FlexPieコントロールを画像にエクスポートするには、次のコードを［Views］→［FlexPie］→［Index.cshtml］に追加します。

    Index.cshtml
    コードのコピー 
    <script type="text/javascript">
function exportImage() {
    var exporter = new wijmo.chart.ImageExporter();
    imageType = document.getElementById("mySelect").value;
    control = wijmo.Control.getControl('#flexPie');
    exporter.requestExport(control,
    "http://demos.componentone.com/ASPNET/C1WebAPIService/api/export/image", {
        fileName: "exportFlexPie",
        type: imageType,
    });
}
</script>
                   

    FlexPieコントロールを画像にエクスポートするには、次のマークアップを<script>タグ内に追加します。

    JavaScript
    コードのコピー 
    <script type="text/javascript">
function exportImage() {
var exporter = new wijmo.chart.ImageExporter();                         
var control = wijmo.Control.getControl("#FlexPie");
exporter.requestExport(control, " http://demos.componentone.com/ASPNET/C1WebAPIService/api/export/image", {
fileName: "exportFlexPie",
type: Png,
        });
    }
</script>
                   

    メモ： HTMLアプリケーションでWijmo 5コントロールを使用するには、いくつかのWijmoファイルへの参照をHTMLページに含める必要があります。これらのWijmoファイルをダウンロードしてアプリケーション内の適切なフォルダにコピーするか、クラウド上のコンテンツ配信ネットワーク（CDN）でホストされているWijmoファイルを参照します。Wijmoスクリプトファイルを「Scripts」というフォルダに、cssファイルを「Styles」というフォルダに、Wijmoコントロールに固有のスクリプトファイルを「Controls」フォルダにダウンロードして配置した場合は、HTMLページの<head>タグ内に次の参照を追加します。

    HTML
    コードのコピー 
    <script src="Controls/wijmo.min.js" type="text/javascript"></script>
<link href="Styles/wijmo.min.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="Controls/wijmo.chart.min.js" type="text/javascript"></script>
<script src="Scripts/webapiclient.min.js" type="text/javascript"></script>

     

  3. ボタンを追加し、ボタンクリックでエクスポート機能を呼び出して、エクスポート要求が開始されるようにします。
    • 次のコードを［Views］→［MVCFlexGrid］→［Index.cshtml］に追加して、エクスポート/インポート機能に対応するボタンを追加します。

    次のコードを［Views］→［FlexPie］→［Index.cshtml］に追加して、エクスポート機能に対応するボタンを追加します。

    Index.cshtml
    コードのコピー 
    <select id="mySelect">
    <option selected>Png</option>
    <option>Jpg</option>
    <option>Gif</option>
    <option>Bmp</option>
    <option>Tiff</option>
</select>
<button onclick="exportImage()" title="Export">Export</button>

    次のマークアップを<body>タグ内に追加して、エクスポート機能に対応するボタンを作成します。

    HTML
    コードのコピー 
    <button onclick="exportImage()" title="Export">Export</button>

    先頭に戻る

    手順2：クライアントプロジェクトを実行する

    MVCアプリケーション

    • ［ビルド］→［ソリューションのビルド］をクリックして、プロジェクトをビルドします。
    • ［F5］キーを押してプロジェクトを実行します。

    HTMLアプリケーション

    • HTMLファイルを保存し、それをブラウザで開きます。

    ［Export］ボタンがコントロールと共に出力に表示されます。このボタンを使用して、コントロールを画像としてエクスポートできます。

    MVCおよびWijmo5 FlexPieコントロールを使用した画像エクスポートサービスのデモサンプルをぜひご覧ください。

    先頭に戻る

 

 

Copyright © MESCIUS, Inc. All rights reserved.