クイックスタート

全て展開

すべて折りたたむ

このクイックスタートは、Web ページの作成、wijcompositechart ウィジェットの追加、およびウィジェットの外観と動作のカスタマイズを行います。

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

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

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

CDN からの最新の依存ファイルは、wijmo cdn で参照できます。それをHTML ページの <head> タグ内に追加します。たとえば、

ドロップダウンからリファレンスをコピーして head タグ内に張り付けます。

<body> タグ内に、次のようなマークアップを追加します。<input>要素がウィジェットを作成し、その id オプションに設定された ‘wijcompositechart’ をjQuery で呼び出してウィジェットを初期化します。このマークアップは、ウィジェットの高さおよび幅も設定します。
ドロップダウンからマークアップをコピーして body タグ内に張り付けます。
マークアップ
コードのコピー

<div id="wijcompositechart" style="width: 500px; height: 400px"> </div>

リファレンス	コードのコピー
<!--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>

マークアップ	コードのコピー
<div id="wijcompositechart" style="width: 500px; height: 400px"> </div>

<head> タグ内に、参照の下に次のようなスクリプトを追加して jQuery ウィジェットを初期化します。このスクリプトは、ウィジェットを初期化して複数のウィジェットオプションを設定します。

X と Y 軸はタイトルテキストを表示するように設定されます。
ツールチップ (ヒント) のコンテンツはデータラベルを表示するように設定されます。
headerヘッダーはタイトルテキストを表示します。
グラフの種類、ラベル、データ（円グラフの半径と折れ線グラフのマーカタイプも含む）を seriesList に追加します。

ドロップダウンからスクリプトをコピーして head タグ内に張り付けます。

スクリプト	コードのコピー
<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> <script id="scriptInit" type="text/javascript"> require(["wijmo.wijcompositechart"], function () { $(document).ready(function () { $("#wijcompositechart").wijcompositechart({ axis: { y: {text: "Total Hardware"}, x: {text: ""} }, hint: { content: function () {return this.label + '\n ' + this.y + '';} }, header: {text: "Hardware Distribution"}, seriesList: [{ type: "column", label: "West", data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [5, 3, 4, 7, 2] } }, { type: "column", label: "Central", data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [2, 2, 3, 2, 1] } }, { type: "column", label: "East", data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 4, 4, 2, 5] } }, { type: "pie", label: "asdfdsfdsf", center: { x: 150, y: 150 }, radius: 60, data: [ {label: "MacBook Pro",data: 46.78}, {label: "iMac", data: 23.18}, {label: "MacBook", data: 20.25} ] }, { type: "line", label: "Steam1", data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 6, 2, 9, 5] }, markers: {visible: true, type: "circle"} }, { type: "line", label: "Steam2", data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [1, 3, 4, 7, 2] }, markers: {visible: true, type: "tri"} }] }); }); }); </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>

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijcompositechart"], function () {
        $(document).ready(function () {
            $("#wijcompositechart").wijcompositechart({
                axis: {
                    y: {text: "Total Hardware"},
                    x: {text: ""}
                },
                hint: {
                    content: function () {return this.label + '\n ' + this.y + '';}
                },
                header: {text: "Hardware Distribution"},
                seriesList: [{
                    type: "column",
                    label: "West",
                    data: { 
                        x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], 
                        y: [5, 3, 4, 7, 2] }
                }, {
                    type: "column",
                    label: "Central",
                    data: { 
                        x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], 
                        y: [2, 2, 3, 2, 1] }
                }, {
                    type: "column",
                    label: "East",
                    data: { 
                        x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], 
                        y: [3, 4, 4, 2, 5] }
                }, {
                    type: "pie",
                    label: "asdfdsfdsf",
                    center: { x: 150, y: 150 },
                    radius: 60,
                    data: [
                        {label: "MacBook Pro",data: 46.78}, 
                        {label: "iMac", data: 23.18}, 
                        {label: "MacBook", data: 20.25}
                    ]
                }, {
                    type: "line",
                    label: "Steam1",
                    data: {
                        x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
                        y: [3, 6, 2, 9, 5]
                    },
                    markers: {visible: true, type: "circle"}
                }, {
                    type: "line",
                    label: "Steam2",
                    data: {
                        x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
                        y: [1, 3, 4, 7, 2]
                    },
                    markers: {visible: true, type: "tri"}
                }]
            });
        });
    });
</script>

HTML ファイルを保存してブラウザで開きます。ウィジェットは、次のように表示されます。

関連トピック

参照