クイックスタート

全て展開

すべて折りたたむ

このクイックスタートでは、HTML マークアップおよび jQuery スクリプトを使用して、HTML プロジェクトに LineChart ウィジェットを追加する方法について学びます。

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

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

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

依存ファイルへのリンクを HTML ページの <head> タグ内に追加します。最新の依存ファイルについては、「Wijmo CDN」の CDN ファイルを参照してください。

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

次のマークアップを <body> タグ内に追加して、ウィジェットを作成します。<div> 要素はウィジェットを作成し、その id 属性を jQuery で呼び出して初期化します。
ドロップダウンからマークアップをコピーして body タグ内に貼り付けます
マークアップ
コードのコピー

<div id="wijlinechart" style="width: 400px; height: 300px"> </div>

参照	コードのコピー
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--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" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20173.128.js" type="text/javascript"></script>

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

<head> タグ内の参照の下に次のスクリプトを追加して、ウィジェットを初期化し、データを読み込みます。

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

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijlinechart").wijlinechart({ showChartLabels: false, hint: { content: function () { return this.y; } }, header: { text: "World of Warcraft Players by Region" }, axis: { y: {labels: {style: {rotation: -45}}}, x: {labels: {style: {rotation: -45}}} }, seriesList: [ { label: "North America", legendEntry: true, data: { x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("12/1/2005"), new Date("3/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")], y: [1000000, 1000000, 1100000, 1400000, 1700000, 2000000, 2500000] }, markers: {visible: true, type: "circle"} }, { label: "Europe", legendEntry: true, data: { x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("12/1/2005"), new Date("3/1/2006"), new Date("7/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")], y: [1000000, 1000000, 900000, 1000000, 1000000, 1000000, 1500000, 2000000] }, markers: {visible: true, type: "circle"} }, { label: "Asia", legendEntry: true, data: { x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("3/1/2006"), new Date("9/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")], y: [1500000, 2000000, 2400000, 3700000, 4000000, 4500000, 5500000] }, markers: {visible: true, type: "circle"} } ], seriesStyles: [ {stroke: "#B70CF0", "stroke-width": 2, opacity: 1}, {stroke: "#0C85F0", "stroke-width": 2, opacity: 1}, {stroke: "#0C2AF0", "stroke-width": 2, opacity: 1} ] }); var resizeTimer = null; $(window).resize(function () { window.clearTimeout(resizeTimer); resizeTimer = window.setTimeout(function () { var jqLine = $("#wijlinechart"), width = jqLine.width(), height = jqLine.height(); if (!width \|\| !height) { window.clearTimeout(resizeTimer); return; } jqLine.wijlinechart("redraw", width, height); }, 250); }); }) </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijlinechart").wijlinechart({
            showChartLabels: false,
            hint: {
                content: function () {
                    return this.y;
                }
            },
            header: {
                text: "World of Warcraft Players by Region"
            },
            axis: {
                y: {labels: {style: {rotation: -45}}},
                x: {labels: {style: {rotation: -45}}}
            },               
            seriesList: [
                {
                    label: "North America",
                    legendEntry: true,
                    data: {
                        x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("12/1/2005"), 
                            new Date("3/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")],
                        y: [1000000, 1000000, 1100000, 1400000, 1700000, 2000000, 2500000]
                    },
                    markers: {visible: true, type: "circle"}
                },
                {
                     label: "Europe",
                     legendEntry: true,
                     data: {
                         x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("12/1/2005"), 
                             new Date("3/1/2006"), new Date("7/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")],
                         y: [1000000, 1000000, 900000, 1000000, 1000000, 1000000, 1500000, 2000000]
                     },
                     markers: {visible: true, type: "circle"}
                },
                {
                      label: "Asia",
                      legendEntry: true,
                      data: {
                          x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("3/1/2006"), 
                              new Date("9/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")],
                          y: [1500000, 2000000, 2400000, 3700000, 4000000, 4500000, 5500000]
                      },
                      markers: {visible: true, type: "circle"}
                }
            ],
            seriesStyles: [
                {stroke: "#B70CF0", "stroke-width": 2, opacity: 1}, 
                {stroke: "#0C85F0", "stroke-width": 2, opacity: 1}, 
                {stroke: "#0C2AF0", "stroke-width": 2, opacity: 1}
            ]
        });
                var resizeTimer = null;
               $(window).resize(function () {
                    window.clearTimeout(resizeTimer);
                    resizeTimer = window.setTimeout(function () {
                        var jqLine = $("#wijlinechart"),
                    width = jqLine.width(),
                    height = jqLine.height();
                        if (!width || !height) {
                            window.clearTimeout(resizeTimer);
                            return;
                        }
                        jqLine.wijlinechart("redraw", width, height);
                    }, 250);
                });
            })
 </script>

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

関連トピック

参照