クイックスタート

全て展開

すべて折りたたむ

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

テキストエディタで新規の 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> タグ内に、次のようにマークアップを追加します。<div>要素でウィジェットが作成され、jQuery で初期化するには<div>要素の id 属性を呼び出します。
ドロップダウンからマークアップをコピーして body タグ内に貼り付けます
マークアップ
コードのコピー

<div id="wijbubblechart" style="width: 400px; height: 300px"> </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="wijbubblechart" style="width: 400px; height: 300px"> </div>

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

各バブル上の Y1 値がグラフを乱雑にしないように、showChartLabelsオプションは false に設定されます。
X および Y軸は、タイトルテキストを表示するように設定されます。
ツールチップ（ヒント）のコンテンツは、データラベルを表示するように設定されます。
ヘッダーには、タイトルテキストが表示されます。
６カ国のラベル、データ、およびマーカータイプがseriesList に追加されます。各データのセットは、異なるマーカータイプを使用します。詳細については、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.wijbubblechart"], function () { $(document).ready(function () { $("#wijbubblechart").wijbubblechart({ showChartLabels: false, axis: { y: {text: "Life Expectancy"}, x: {text: "Income"} }, hint: { content: function () {return this.data.label;} }, header: {text: "Wealth & Health of Nations - 2010"}, seriesList: [ { label: "China", data: { y: [73], x: [7931], y1: [1340] }, markers: {type: "tri"} }, { label: "India", data: { y: [65], x: [2972], y1: [1150] }, markers: {type: "diamond"} }, { label: "USA", data: { y: [78], x: [42066], y1: [309] }, markers: {type: "circle"} }, { label: "Japan", data: { y: [83], x: [30866], y1: [126] }, markers: {type: "cross"} }, { label: "Russia", data: { y: [69], x: [14318], y1: [140] }, markers: {type: "invertedTri"} }, { label: "Congo", data: { y: [48], x: [374], y1: [72] }, markers: {type: "box"} }] }); }); }); </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.wijbubblechart"], function () {
        $(document).ready(function () {
            $("#wijbubblechart").wijbubblechart({
                showChartLabels: false,
                axis: {
                    y: {text: "Life Expectancy"},
                    x: {text: "Income"}
                },
                hint: {
                    content: function () {return this.data.label;}
                },
                header: {text: "Wealth & Health of Nations - 2010"},
                seriesList: [
                {
                    label: "China",
                    data: { y: [73], x: [7931], y1: [1340] },
                    markers: {type: "tri"}
                }, {
                    label: "India",
                    data: { y: [65], x: [2972], y1: [1150] },
                    markers: {type: "diamond"}
                }, {
                    label: "USA",
                    data: { y: [78], x: [42066], y1: [309] },
                    markers: {type: "circle"}
                }, {
                    label: "Japan",
                    data: { y: [83], x: [30866], y1: [126] },
                    markers: {type: "cross"}
                }, {
                    label: "Russia",
                    data: { y: [69], x: [14318], y1: [140] },
                    markers: {type: "invertedTri"}
                }, {
                    label: "Congo",
                    data: { y: [48], x: [374], y1: [72] },
                    markers: {type: "box"}
                }]
            });
        });
    });
</script>

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

関連トピック

参照