クイックスタート

全て展開

すべて折りたたむ

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

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

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

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

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

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

<body> タグ内に次のマークアップを記述して、ウィジェットを作成します。<div> 要素によってウィジェットが作成されます。この id 属性を jQuery 内で呼び出すことで、ウィジェットを初期化します。
ドロップダウンしてマークアップをコピーしてbody タグ内に貼り付けます
マークアップ
コードのコピー

<div id="wijcandlestickchartDefault" style="width: 600px; 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> <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>

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

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

myData という名前の変数は、seriesList 内で使用するためのすべてのデータ値を追加します。
X および Y axes には、スタイル、配置、目盛の位置、およびタイトルテキストを独自に設定します。
ツールチップ（hint）として、書式設定したデータラベルを表示します。
header にはタイトルテキストを表示します。
データは myData 変数を使用して seriesList に追加されます。

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

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijcandlestickchart"], function () { $(document).ready(function () { var myData = { x: [new Date('12/1/2011'), new Date('12/2/2011'), new Date("12/5/2011"), new Date("12/6/2011"), new Date("12/7/2011"), new Date("12/8/2011"), new Date("12/9/2011"), new Date("12/12/2011"), new Date("12/13/2011"), new Date("12/14/2011"), new Date("12/15/2011"), new Date("12/16/2011"), new Date("12/19/2011"), new Date("12/20/2011"), new Date("12/21/2011"), new Date("12/22/2011"), new Date("12/23/2011"), new Date("12/26/2011"), new Date("12/27/2011"), new Date("12/28/2011"), new Date("12/29/2011"), new Date("12/30/2011"), new Date('1/2/2012'), new Date('1/3/2012'), new Date('1/4/2012'), new Date("1/5/2012"), new Date("1/6/2012"), new Date("1/9/2012"), new Date("1/10/2012"), new Date("1/11/2012"), new Date("1/12/2012"), new Date("1/13/2012"), new Date("1/16/2012"), new Date("1/17/2012"), new Date("1/18/2012"), new Date("1/19/2012"), new Date("1/20/2012"), new Date("1/23/2012"), new Date("1/24/2012"), new Date("1/25/2012"), new Date("1/26/2012"), new Date("1/27/2012"), new Date("1/30/2012"), new Date("1/31/2012")], high: [10, 12, 11, 14, 16, 20, 18, 17, 17.5, 20, 22, 21, 22.5, 20, 21, 20.8, 20, 19, 18, 17, 16, 15, 15, 14, 13, 12, 11.5, 10.9, 10, 9, 9.5, 10, 12, 11, 14, 16, 20, 18, 17, 17.5, 20, 22, 21, 22.5], low: [7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10, 12.2, 12, 16, 15.5, 16, 15, 16, 16.5, 16, 16, 15, 14.5, 14, 13.5, 13, 12, 11, 11, 10, 9, 8, 7.5, 7.9, 7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10, 12.2, 12, 16, 15.5, 16], open: [8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5, 17.8, 18.6, 19.8, 18, 16.9, 15.6, 14.7, 14.2, 13.9, 13.2, 12.8, 11.7, 11.2, 10.5, 9.4, 8.9, 8.4, 8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2], close: [8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5, 17.8, 18.6, 19.8, 18, 16.9, 15.6, 14.7, 14.2, 13.9, 13.2, 12.8, 11.7, 11.2, 10.5, 9.4, 8.9, 8.4, 8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5] }; $("#wijcandlestickchartDefault").wijcandlestickchart({ textStyle: { "font-size": "13px", "font-family": '"Segoe UI", Arial, sans-serif' }, header: { text: "Stock History" }, legend: { visible: true, compass: "north", orientation: "horizontal" }, hint: { content: function () { return this.label + ' - ' + Globalize.format(this.x, "d") + '\n High:' + this.high + '\n Low:' + this.low + '\n Open:' + this.open + '\n Close:' + this.close; }, contentStyle: { "font-size": "12px", "font-family": '"Segoe UI", Arial, sans-serif' }, style: { fill: "#444444", stroke: "none" } }, axis: { x: { textStyle: { "font-weight": "normal" }, tickMajor: { position: "outside",//Position tick marks outside of the axis line style: { stroke: "#999999"//Make the tick marks match axis line color } } }, y: { text: "Stock Price", textStyle: { "font-weight": "normal" }, alignment: "far"//axis text aligned away from xy intersection } }, seriesList: [{ label: "MSFT", legendEntry: true, data: myData }], seriesStyles: [{ highLow: {fill: "#88bde6"} }] }); }); }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijcandlestickchart"], function () {
        $(document).ready(function () {
            var myData = {
                x: [new Date('12/1/2011'), new Date('12/2/2011'), new Date("12/5/2011"), new Date("12/6/2011"), new Date("12/7/2011"),
                    new Date("12/8/2011"), new Date("12/9/2011"), new Date("12/12/2011"), new Date("12/13/2011"), new Date("12/14/2011"),
                    new Date("12/15/2011"), new Date("12/16/2011"), new Date("12/19/2011"), new Date("12/20/2011"), new Date("12/21/2011"),
                    new Date("12/22/2011"), new Date("12/23/2011"), new Date("12/26/2011"), new Date("12/27/2011"), new Date("12/28/2011"),
                    new Date("12/29/2011"), new Date("12/30/2011"), new Date('1/2/2012'), new Date('1/3/2012'), new Date('1/4/2012'),
                    new Date("1/5/2012"), new Date("1/6/2012"), new Date("1/9/2012"), new Date("1/10/2012"), new Date("1/11/2012"),
                    new Date("1/12/2012"), new Date("1/13/2012"), new Date("1/16/2012"), new Date("1/17/2012"), new Date("1/18/2012"),
                    new Date("1/19/2012"), new Date("1/20/2012"), new Date("1/23/2012"), new Date("1/24/2012"), new Date("1/25/2012"),
                    new Date("1/26/2012"), new Date("1/27/2012"), new Date("1/30/2012"), new Date("1/31/2012")],

                high: [10, 12, 11, 14, 16, 20, 18, 17, 17.5, 20, 22, 21, 22.5, 20, 21, 20.8, 20, 19, 18, 17, 16, 15, 15, 14, 13, 12,
                    11.5, 10.9, 10, 9, 9.5, 10, 12, 11, 14, 16, 20, 18, 17, 17.5, 20, 22, 21, 22.5],
                low: [7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10, 12.2, 12, 16, 15.5, 16, 15, 16, 16.5, 16, 16, 15, 14.5, 14, 13.5, 13, 12, 11,
                    11, 10, 9, 8, 7.5, 7.9, 7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10, 12.2, 12, 16, 15.5, 16],
                open: [8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5, 17.8, 18.6, 19.8, 18, 16.9, 15.6, 14.7, 14.2, 13.9, 13.2,
                    12.8, 11.7, 11.2, 10.5, 9.4, 8.9, 8.4, 8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2],
                close: [8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5, 17.8, 18.6, 19.8, 18, 16.9, 15.6, 14.7, 14.2, 13.9, 13.2,
                    12.8, 11.7, 11.2, 10.5, 9.4, 8.9, 8.4, 8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5]
            };

            $("#wijcandlestickchartDefault").wijcandlestickchart({
                textStyle: {
                    "font-size": "13px",
                    "font-family": '"Segoe UI", Arial, sans-serif'
                },
                header: {
                    text: "Stock History"
                },
                legend: {
                    visible: true,
                    compass: "north",
                    orientation: "horizontal"
                },
                hint: {
                    content: function () {
                        return this.label + ' - ' +
                        Globalize.format(this.x, "d") +
                        '\n High:' + this.high +
                        '\n Low:' + this.low +
                        '\n Open:' + this.open +
                        '\n Close:' + this.close;
                    },
                    contentStyle: {
                        "font-size": "12px",
                        "font-family": '"Segoe UI", Arial, sans-serif'
                    },
                    style: {
                        fill: "#444444",
                        stroke: "none"
                    }
                },
                axis: {
                    x: {
                        textStyle: {
                            "font-weight": "normal"
                        },
                        tickMajor: {
                            position: "outside",//Position tick marks outside of the axis line
                            style: {
                                stroke: "#999999"//Make the tick marks match axis line color
                            }
                        }
                    },
                    y: {
                        text: "Stock Price",
                        textStyle: {
                            "font-weight": "normal"
                        },
                        alignment: "far"//axis text aligned away from xy intersection
                    }
                },
                seriesList: [{
                    label: "MSFT",
                    legendEntry: true,
                    data: myData
                }],
                seriesStyles: [{
                    highLow: {fill: "#88bde6"}
                }]
            });

        });
    });
</script>

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

関連トピック

参照