Wijmo UI for the Web
株価データの比較
Wijmo ユーザーガイド > ウィジェット > ChartNavigator > ユーザーシナリオ > 株価データの比較
全て展開全て展開
すべて折りたたむすべて折りたたむ

wijchartnavigator ウィジェットを複数のチャートに連結すると、一定期間内のデータをより効果的に可視化できます。このシナリオでは、wijchartnavigator を 2 つのチャートに連結して、2014 年 1 月から 2014 年 3 月までの株価を表します。

ローソク足チャートでは詳細な株価データ（高値、安値、始値、終値）を表示し、始値と終値の関係についての情報を提供します。また、折れ線グラフにより、3 か月間の全体的な業績と株価動向を示します。

wijchartnavigator を wijlinechart および wijcandlestickchart に連結するには、次のコードを使用します。

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

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

  2. <body> タグ内に次のマークアップを追加して、ウィジェットを作成します。<div> 要素によってウィジェットが作成され、その高さと幅が設定されます。
    マークアップ
    コードのコピー 
    <div id="chart1" style="width:900px; height: 250px; "></div>
    <div id="wijlinechart" style="width:1000px;  "></div>
<div id="wijchartnavigator" style="width:900px; height: 56px">
 </div>
  3. <head> タグ内の参照の後に、次のスクリプトを追加します。このスクリプトは、チャートにデータを追加し、wijchartnavigator に連結します。
    スクリプト
    コードのコピー 
    <script id="scriptInit" type="text/javascript">
    require(["wijmo.wijcandlestickchart", "wijmo.wijchartnavigator", "wijmo.wijlinechart"], 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,
            });
                
            $("#wijlinechart").wijlinechart({
            type: "area",
                seriesList: [{
                    
                    data: data
                }]
            });          
            $("#wijchartnavigator").wijchartnavigator({
                targetSelector: "#chart1, #wijlinechart",
                rangeMin: $.toOADate(new Date("2014/2/5")),
                rangeMax: $.toOADate(new Date("2014/2/28")),
                seriesList: [{
                    data: { x: data.x, y: data.high }
                }],
                    
            });
        });
    });
    </script>



 

 

Copyright © GrapeCity inc. All rights reserved.