画像としてエクスポート

ここでは、HTML マークアップおよび jQuery スクリプトを使用して、HTML プロジェクトに chartexport および wijbarchart への参照を追加し、5 つの画像エクスポートタイプを選択して追加する方法について、詳しく説明します。

テキストエディタで新規の HTML ページを作成するには、下記コードを追加して文章を .html の拡張子で保存します。
ドロップダウンしてマークアップをコピーします
テキストエディタに張り付けます
コードのコピー

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

テキストエディタに張り付けます	コードのコピー
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

依存ファイルへのリンクを HTML ページの <head>タグ内に追加します。最新の依存ファイルについては、「wijmo cdn」にあるコンテンツ配信ネットワーク（CDN）ファイルを参照してください。

ドロップダウンして参照コードをコピーし、head タグ内に貼り付けます。

参照	コードのコピー
<!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <!--RequireJs--> <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script> <script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20173.128", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min" } }); </script>

<body>タグ内に次のマークアップを追加して、棒グラフウィジェット、ドロップダウンセレクタ、およびボタンを作成します。

<div>要素は棒グラフウィジェットを作成します。jQuery 内では、この id 属性を呼び出すことでウィジェットを初期化します。
<input>要素はボタンを作成します。jQuery 内でこの id 属性を呼び出すことで、クリックの実行時にチャートをエクスポートします。
<select>要素はドロップダウンリストを作成します。jQuery 内では、このid属性を呼び出すことで値を収集しexportFileTypeオプションで使用します。

ドロップダウンして参照コードをコピーし、head タグ内に貼り付けます。

マークアップ	コードのコピー
<div id="wijbarchart" style="width: 400px; height: 300px"> <input type="button" value="Export to Image" id="exportImage"/> <select id="exporttype"> <option selected="selected" value="Jpg">Export To Jpg</option> <option value="Png">Export To Png</option> <option value="Gif">Export To Gif</option> <option value="Bmp">Export To Bmp</option> <option value="Tiff">Export To Tiff</option> </select> </div>

<head>タグ内の参照の後に、次のスクリプトを追加します。このスクリプトは、ウィジェットを初期化してデータを供給します。また、ボタンがクリックされると、以下の設定を使用してチャートをエクスポートします。

<select>ドロップダウンから選択された、エクスポートタイプを示す値を収集します。
チャートエクスポート用 API へのパスは、ComponentOne デモサーバーに転送されます。
エクスポートするチャートは、棒グラフウィジェットのマークアップに指定された id 属性として設定されます。
エクスポートするチャートは、棒グラフウィジェットのマークアップに指定されたid属性として設定されます。
エクスポートするファイルの種類はタイプ変数から取得されます。
エクスポートするファイルの名前は MyChartImageExport に設定されます。

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijbarchart", "chartexport"], function () { $(document).ready(function () { $("#wijbarchart").wijbarchart({ seriesList: [{ label: "US", legendEntry: true, data: { x: ['PS3', 'XBOX360', 'Wii'], y: [12.35, 21.50, 30.56] } }] }); }); $("#exportImage").button().click(function () { var type = $("#exporttype").val(); wijmo.exporter.exportChart({ serviceUrl: "http://demos.componentone.com/ASPNET/ExportService/exportapi/chart", chart: $("#wijbarchart").data("wijmo-wijbarchart"), exportFileType: wijmo.exporter.ExportFileType[type], fileName: "MyChartImageExport" }); }); }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
require(["wijmo.wijbarchart", "chartexport"], function () {
    $(document).ready(function () {
        $("#wijbarchart").wijbarchart({
            seriesList: [{
                label: "US",
                legendEntry: true,
                data: { x: ['PS3', 'XBOX360', 'Wii'], y: [12.35, 21.50, 30.56] }
            }]
        });
    });
    $("#exportImage").button().click(function () {
        var type = $("#exporttype").val();
        wijmo.exporter.exportChart({
            serviceUrl: "http://demos.componentone.com/ASPNET/ExportService/exportapi/chart",
            chart: $("#wijbarchart").data("wijmo-wijbarchart"),
            exportFileType: wijmo.exporter.ExportFileType[type],
            fileName: "MyChartImageExport"
        });                
    });
});
</script>

HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のように表示されます。エクスポートタイプをドロップダウンして、任意の画像タイプを選択し、［Export to Image］ ボタンをクリックします。ダウンロードフォルダにファイルがエクスポートされます。

関連トピック

参照