Wijmo UI for the Web
Angular JS と Wijchartnavigator
Wijmo ユーザーガイド > Angular JS ディレクティブ > Angular JS と Wijchartnavigator
全て展開全て展開
すべて折りたたむすべて折りたたむ

この Angular 導入ガイドでは、HTML マークアップ、jQuery スクリプト、および AngularJS ディレクティブを使用して、wijchartnavigator ウィジェットを HTML プロジェクト内で使用する方法について学習します。

コントローラーとモデルをそれぞれ個別のファイルで設定する、より複雑なサンプルについては、弊社 Web サイト「 AngularJS Directive Gallery」を参照してください。

  1. 任意のテキストエディタで、新たな HTML ページを作成します。これには、次のコードを追加し、拡張子 .html を付けてドキュメントを保存します。
  2. 依存関係へのリンクを HTML ページの <head> タグ内に追加します。最新の依存ファイルについては、「 wijmo cdn」のコンテンツ配信ネットワーク（CDN）ファイルを参照してください。通常の参照に加え、Angular 用に 2 つのスクリプト参照を追加します。この参照は jQuery 参照の後に続ける必要があるので、最後の 2 行となります。
    • 1 つは AngularJS 自身です。
    • もう 1 つは、Wijmo の Angular javascript 統合ライブラリです。

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

  3. <head> タグ内の参照の後に、次のスクリプトを追加します。このスクリプトは、アプリケーションが Wijmo を使用するように設定し、$scope パラメータでデータコンテキストを制御する単純なコントローラーを作成します。
    スクリプト
    コードのコピー 
    <script type="text/javascript">
    var MyApp = angular.module("MyApp", ["wijmo"]);

    var data = {
        x: [new Date("2013/1/24"), new Date("2013/1/25"), new Date("2013/1/28"), new Date("2013/1/29"), new Date("2013/1/30"),
                    new Date("2013/1/31"), new Date("2013/2/1"), new Date("2013/2/4"), new Date("2013/2/5"), new Date("2013/2/6"),
                    new Date("2013/2/7"), new Date("2013/2/8"), new Date("2013/2/18"), new Date("2013/2/19"), new Date("2013/2/20"),
                    new Date("2013/2/21"), new Date("2013/2/22"), new Date("2013/2/25"), new Date("2013/2/26"), new Date("2013/2/27"),
                    new Date("2013/2/28"), new Date("2013/3/1"), new Date("2013/3/4"), new Date("2013/3/5"), new Date("2013/3/6"),
                    new Date("2013/3/7"), new Date("2013/3/8"), new Date("2013/3/11"), new Date("2013/3/12"), new Date("2013/3/13"),
                    new Date("2013/3/14"), new Date("2013/3/15"), new Date("2013/3/18"), new Date("2013/3/19"), new Date("2013/3/20"),
                    new Date("2013/3/21"), new Date("2013/3/22"), new Date("2013/3/25"), new Date("2013/3/26"), new Date("2013/3/27"),
                    new Date("2013/3/28"), new Date("2013/3/29"), new Date("2013/4/1"), new Date("2013/4/2"), new Date("2013/4/3"),
                    new Date("2013/4/8"), new Date("2013/4/9"), new Date("2013/4/10"), new Date("2013/4/11"), new Date("2013/4/12"),
                    new Date("2013/4/15"), new Date("2013/4/16"), new Date("2013/4/17"), new Date("2013/4/18"), new Date("2013/4/19"),
                    new Date("2013/4/22"), new Date("2013/4/23"), new Date("2013/4/24"), new Date("2013/4/25"), new Date("2013/4/26"),
                    new Date("2013/5/2"), new Date("2013/5/3"), new Date("2013/5/6"), new Date("2013/5/7"), new Date("2013/5/8"),
                    new Date("2013/5/9"), new Date("2013/5/10"), new Date("2013/5/13"), new Date("2013/5/14"), new Date("2013/5/15"),
                    new Date("2013/5/16"), new Date("2013/5/17"), new Date("2013/5/20"), new Date("2013/5/21"), new Date("2013/5/22"),
                    new Date("2013/5/23"), new Date("2013/5/24"), new Date("2013/5/27"), new Date("2013/5/28"), new Date("2013/5/29"),
                    new Date("2013/5/30"), new Date("2013/5/31"), new Date("2013/6/3"), new Date("2013/6/4"), new Date("2013/6/5"),
                    new Date("2013/6/6"), new Date("2013/6/7"), new Date("2013/6/13")],
        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, 2321.41, 2334.74, 2318.58, 2299.38, 2273.55, 2238.49, 2229.46, 2234.92, 2232.69, 2196.24, 2215.47,
            2224.93, 2236.98, 2218.09, 2199.91, 2169.63, 2195.03, 2181.82, 2201.12, 2236.42, 2242.62, 2187.35, 2213.19, 2203.89, 2170.78, 2179.05,
            2212.51, 2227.86, 2242.39, 2246.96, 2228.82, 2247.68, 2238.93, 2217.09, 2221.34, 2249.81, 2286.33, 2297.11, 2303.75, 2293.81, 2281.45,
            2286.66, 2293.40, 2323.54, 2316.25, 2320.74, 2300.21, 2297.10, 2270.71, 2264.43, 2242.26, 2190.10],
        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, 2314.68, 2309.16, 2282.17, 2255.77, 2269.31,
               2267.29, 2244.26, 2257.74, 2318.21, 2321.41, 2334.74, 2318.58, 2299.38, 2273.55, 2238.49, 2229.46, 2234.92, 2232.69, 2196.24, 2215.47,
               2224.93, 2236.98, 2218.09, 2199.91, 2169.63, 2195.03, 2181.82, 2201.12, 2236.42, 2242.62, 2187.35, 2213.19, 2203.89, 2170.78, 2179.05,
               2212.51, 2227.86, 2242.39, 2246.96, 2228.82, 2247.68, 2238.93, 2217.09, 2221.34, 2249.81, 2286.33, 2297.11, 2303.75, 2293.81, 2281.45,
               2286.66, 2293.40, 2323.54, 2316.25, 2320.74, 2300.21, 2297.10, 2270.71, 2264.43, 2242.26, 2190.10],

        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,
              2240.00, 2257.40, 2317.30, 2324.20, 2328.20, 2326.70, 2297.60, 2301.20, 2236.30, 2236.60, 2234.40, 2227.70, 2225.20, 2211.50, 2225.70,
              2226.10, 2219.50, 2206.70, 2181.90, 2194.80, 2193.80, 2197.60, 2244.60, 2242.10, 2184.50, 2218.30, 2199.30, 2177.90, 2174.10, 2205.50,
              2231.10, 2235.50, 2246.30, 2232.90, 2246.80, 2241.90, 2217.00, 2224.80, 2251.80, 2282.80, 2299.99, 2305.11, 2302.40, 2275.67, 2288.53,
              2293.08, 2321.32, 2324.02, 2317.75, 2300.59, 2299.25, 2272.42, 2270.93, 2242.11, 2210.90, 2148.35],
        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,
               2239.20, 2232.00, 2257.40, 2311.60, 2314.90, 2319.90, 2281.10, 2289.20, 2232.90, 2228.80, 2227.30, 2220.40, 2217.20, 2180.60, 2215.40,
               2212.50, 2217.20, 2204.40, 2177.30, 2165.70, 2178.40, 2175.40, 2200.50, 2232.20, 2182.80, 2184.10, 2191.80, 2173.80, 2161.10, 2179.00,
               2212.50, 2219.40, 2235.40, 2221.30, 2225.80, 2231.30, 2205.80, 2213.50, 2210.70, 2248.40, 2281.90, 2290.12, 2292.43, 2274.10, 2270.25,
               2283.94, 2281.47, 2321.17, 2310.49, 2299.37, 2294.11, 2264.76, 2260.87, 2240.07, 2205.07, 2126.22, ],
        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,
                2276.00, 2261.30, 2317.80, 2330.80, 2332.40, 2344.80, 2319.90, 2323.40, 2273.50, 2246.80, 2243.90, 2253.40, 2241.30, 2212.50, 2234.70,
                2233.00, 2242.40, 2226.20, 2204.90, 2196.40, 2197.50, 2206.00, 2250.10, 2245.10, 2242.60, 2226.10, 2224.60, 2210.50, 2179.60, 2222.80,
                2236.00, 2240.20, 2255.20, 2247.80, 2247.60, 2250.80, 2239.90, 2225.10, 2252.80, 2288.00, 2309.30, 2305.30, 2314.10, 2304.90, 2292.50,
                2301.70, 2322.10, 2334.30, 2325.70, 2325.50, 2313.40, 2297.10, 2276.80, 2266.60, 2250.60, 2190.10]
    };

    //Person class
    function MSFT(data) {
        this.Date = data.Date;
        this.Y = data.Y;
        this.Open = data.Open;
        this.Close = data.Close;
        this.Low = data.Low;
        this.High = data.High;
    };

    function MyController($scope, $locale) {
        $scope.list = [];
        for (var i = 0; i < data.x.length; i++) {
            $scope.list.push(new MSFT({ Date: data.x[i], Y: data.y[i], Open: data.open[i], Close: data.close[i], High: data.high[i], Low: data.low[i] }));
        }
    }
</script>
  4. <body> タグ内に次のマークアップを追加して、ウィジェットを作成します。Angular を使用せずに jQuery でこの処理を行う方法については、ChartNavigator の「クイックスタート」を参照してください。

    <wij-chartnavigator> ディレクティブを使用して最初のウィジェットを作成し、以下の属性を設定します。

    • input 要素の id 属性を使用して、この要素を識別し、対応する label 要素の for 属性としてこの ID を呼び出します。
    • height および width オプションを使用して、ChartNavigatorウィジェットのサイズを設定します。
    • 系列リストの bind オプションを使用して、Wijcandlestick チャートにデータを連結します。 
    • また、TargetSelector オプションの値を「#Wijcandlestickchart1」に設定して、チャートナビゲータにチャートを連結します。
    マークアップ
    コードのコピー 
    <div style="width: 800px; height: 250px; margin-bottom: 20px">
    <wij-candlestickchart id="candlestickchart1" datasource="list" margin-left="2" margin-right="2">
        <legend visible="false"></legend>
    <series-list>
        <series label="MSFT">
            <data>
                <x bind="Date"></x>
                <high bind="High"></high>
                <low bind="Low"></low>
                <open bind="Open"></open>
                <close bind="Close"></close>
            </data>
        </series>
    </series-list>
    <series-styles>
        <series-style>
            <high-low fill="rgb(140,140,140)" width="2"></high-low>
            <falling-close fill="rgb(240,126,110)" width="6"></falling-close>
            <rising-close fill="rgb(144,205,151)" width="6"></rising-close>
        </series-style>
    </series-styles>
</wij-candlestickchart>
    <wij-chartnavigator datasource="list" target-selector="#candlestickchart1" style="height: 56px">
        <series-list>
        <series label="MSFT">
            <data>
                <x bind="Date"></x>
                <y bind="High"></y>
            </data>
        </series>
    </series-list>
        <series-styles>
        <series-style stroke="#88bde6" stroke-width="2">
        </series-style>
    </series-styles>
    </wij-chartnavigator>
</div>
  5. 作成されたウィジェットは、実際には次のように表示されます。

 

 

Copyright © GrapeCity inc. All rights reserved.