Wijmo UI for the Web
クイックスタート
Wijmo ユーザーガイド > ウィジェット > ChartNavigator > クイックスタート
全て展開全て展開
すべて折りたたむすべて折りたたむ

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

  1. テキストエディタで新規の HTML ページを作成するには、下記コードを追加して文章を .html の拡張子で保存します。

    ドロップダウンしてマークアップをコピーします

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

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

  3. <body> タグ内に次のマークアップを追加して、ウィジェットを作成します。<div> 要素によってウィジェットが作成され、その height と widthが設定されます。
    マークアップ
    コードのコピー 
    <div id="chart1" style="width:700px; height: 250px; "></div>
<div id="wijchartnavigator" style="width:700px; height: 56px">
 </div>
  4. <head> タグ内の参照の後に、次のスクリプトを追加します。このスクリプトはウィジェットを初期化し、表示するデータを追加します。
    スクリプト
    コードのコピー 
    <script id="scriptInit" type="text/javascript">
        require(["wijmo.wijcandlestickchart", "wijmo.wijchartnavigator"], function () {
            $(document).ready(function () {
                var data = {
                    x: [new Date("2014/1/24"),
                        new Date("2014/1/25"),
                        new Date("2014/1/28"),
                        new Date("2014/1/29"),
                        new Date("2014/1/30"),
                        new Date("2014/1/31"),
                        new Date("2014/2/1"),
                        new Date("2014/2/4"),
                        new Date("2014/2/5"),
                        new Date("2014/2/6"),
                        new Date("2014/2/7"),
                        new Date("2014/2/8"), 
                        new Date("2014/2/18"),
                        new Date("2014/2/19"),
                        new Date("2014/2/20"),
                        new Date("2014/2/21"),
                        new Date("2014/2/22"), 
                        new Date("2014/2/25"), 
                        new Date("2014/2/26"), 
                        new Date("2014/2/27"),
                        new Date("2014/2/28"), 
                        new Date("2014/3/1"), 
                        new Date("2014/3/4"), 
                        new Date("2014/3/5"), 
                        new Date("2014/3/6"),
                        new Date("2014/3/7"), 
                        new Date("2014/3/8"), 
                        new Date("2014/3/11"), 
                        new Date("2014/3/12"), 
                        new Date("2014/3/13"),
                        new Date("2014/3/14"), 
                        new Date("2014/3/15")],
                    y: [2320.26, 2300.26,
                        2295.35, 2347.22, 2360.75, 2383.43, 2377.41, 2425.92, 2411.24, 2432.68, 2430.69, 2416.62, 2441.91, 2420.26, 2383.49, 2378.82, 2322.94,
                        2320.62, 2313.74, 2297.77, 2322.32, 2364.54, 2332.08, 2274.81, 2333.61, 2340.44, 2326.42, 2314.68, 2309.16, 2282.17, 2255.77, 2269.31,
                        2267.29, 2244.26, 2257.74, 2318.21],
                    open: [2320.26, 2300.26,
                           2295.35, 2347.22, 2360.75, 2383.43, 2377.41, 2425.92, 2411.24, 2432.68, 2430.69, 2416.62, 2441.91, 2420.26, 2383.49, 2378.82, 2322.94,2320.62, 2313.74, 2297.77, 2322.32, 2364.54, 2332.08, 2274.81, 2333.61, 2340.44, 2326.42],

                    close: [2302.60, 2291.30,
                          2346.50, 2358.90, 2382.40, 2385.40, 2419.00, 2428.10, 2433.10, 2434.40, 2418.50, 2432.40, 2421.50, 2382.90, 2397.10, 2325.90, 2314.10,
                          2325.80, 2293.30, 2313.20, 2365.50, 2359.50, 2273.40, 2326.30, 2347.10, 2324.20, 2318.60, 2310.50, 2286.60, 2263.90, 2270.20, 2278.40,],
                    low: [2287.30, 2288.20,
                           2295.30, 2337.30, 2347.80, 2371.20, 2369.50, 2417.50, 2403.30, 2427.70, 2394.20, 2414.40, 2415.40, 2373.50, 2370.60, 2309.10, 2308.70, 2315.00, 2289.80, 2292.00, 2308.90, 2330.80, 2259.20, 2270.10, 2321.60, 2304.20, 2314.50, 2296.50, 2264.80, 2253.20, 2253.30, 2250.20,],
                    high: [2362.90, 2308.30,
                            2346.90, 2363.80, 2383.70, 2391.80, 2421.10, 2440.30, 2437.40, 2441.70, 2433.80, 2443.00, 2444.80, 2427.00, 2397.90, 2378.80, 2330.80, 2338.70, 2340.70, 2324.60, 2366.10, 2369.60, 2333.50, 2328.10, 2351.40, 2352.00, 2333.60, 2320.90, 2333.20, 2286.30, 2276.20, 2212.00 ]
                };
                $("#chart1").wijcandlestickchart({
                    textStyle: {
                        "font-size": "13px",
                        "font-family": '"Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif'
                    },
                    header: {
                        text: "Shanghai Stock Index in first half of 2014"
                    },
                    legend: {
                        visible: false,
                    },
                    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;
                        },
                    },
                    axis: {
                        x: {
                            textVisible: false,
                            visible: false
                        }
                    },
                    seriesList: [{
                        label: "MSFT",
                        data: data
                    }],
                    seriesStyles: [
                        {
                            highLow: { fill: "rgb(140,140,140)", width: 2 },
                            fallingClose: { fill: "rgb(240,126,110)", width: 6 },
                            risingClose: { fill: "rgb(144,205,151)", width: 6 }
                        }
                    ],
                    marginTop: 5,
                    marginBottom: 5,
                    marginLeft: 2,
                    marginRight: 2,
                });
                $("#wijchartnavigator").wijchartnavigator({
                    targetSelector: "#chart1",
                    rangeMin: $.toOADate(new Date("2014/2/5")),
                    rangeMax: $.toOADate(new Date("2014/2/28")),
                    seriesList: [{
                        data: { x: data.x, y: data.high }
                    }],
                    
                });
            });
        });
    </script>
  5. 作成されたウィジェットは、実際には次のように表示されます。

 

 

Copyright © GrapeCity inc. All rights reserved.