チャート:フィボナッチツール

このサンプルは、傾向分析に使用可能なフィボナッチツール(アーク、ファン、リトレースメント、タイムゾーン)を示しています。

フィボナッチツールは、株価チャートのトレンド分析に使用されます。範囲セレクタを使用すると、計算対象のデータ範囲を選択できます。

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as input from '@grapecity/wijmo.input'; import * as chart from '@grapecity/wijmo.chart'; import * as fChart from '@grapecity/wijmo.chart.finance'; import * as fChartAnalytics from '@grapecity/wijmo.chart.finance.analytics'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let data = getData(); // create the chart let theChart = new fChart.FinancialChart('#theChart', { itemsSource: data, bindingX: 'date', symbolSize: 6, chartType: 'Candlestick', series: [{ binding: 'high,low,open,close', name: 'Box Inc' }], tooltip: { content: '<b>日付:{date:m}</b><br/>' + '<table>' + '<tr><td>高値</td><td>{high:c}</td><tr/>' + '<tr><td>安値</td><td>{low:c}</td><tr/>' + '<tr><td>始値</td><td>{open:c}</td><tr/>' + '<tr><td>終値</td><td>{close:c}</td><tr/>' + '</table>' } }); theChart.palette = getRandomPalette(); theChart.beginUpdate(); let s = theChart.series; //retracements let retracements = new fChartAnalytics.Fibonacci({ binding: 'close', symbolSize: 1, style: { fill: 'red', stroke: 'red', strokeWidth: 0.5, fontSize: 10 }, name: 'リトレースメント', labelPosition: 'Left', uptrend: true }); s.push(retracements); //arcs let arcs = new fChartAnalytics.FibonacciArcs({ binding: 'close', name: 'アーク', start: new chart.DataPoint(46, 19.75), end: new chart.DataPoint(54, 17.1), labelPosition: 'Top', visibility: 'Hidden' }); s.push(arcs); //fans let fans = new fChartAnalytics.FibonacciFans({ binding: 'close', name: 'ファン', start: new chart.DataPoint(10, 18.12), end: new chart.DataPoint(32, 20.53), labelPosition: 'Top', visibility: 'Hidden' }); s.push(fans); //timeZones let timeZones = new fChartAnalytics.FibonacciTimeZones({ binding: 'close', name: 'タイムゾーン', startX: 0, endX: 3, labelPosition: 'Right', visibility: 'Hidden' }); s.push(timeZones); theChart.endUpdate(); //type selector let type = new input.Menu('#type', { header: '種類', itemClicked: reset }); reset(type); function reset(menu) { let idx = menu.selectedIndex; idx = idx === -1 ? 0 : idx; let selectors = ['.ul-retracements', '.ul-arcs', '.ul-fans', '.ul-timezones']; let series = [retracements, arcs, fans, timeZones]; let props = document.querySelectorAll('.ul-properties'); for (let i = 0, len = props.length; i < len; i++) { let v = props[i]; v.style.display = 'none'; } let sels = document.querySelectorAll(selectors[idx]); for (let i = 0, len = sels.length; i < len; i++) { let v = sels[i]; v.style.display = ''; } series.forEach(s => s.visibility = chart.SeriesVisibility.Hidden); series[idx].visibility = chart.SeriesVisibility.Visible; updateMenuHeader(type, '種類'); } //retracements properties let menuRetracementsUptrend = new input.Menu('#uptrend', { header: 'トレンドの種類', itemClicked: (s) => { retracements.uptrend = !!s.selectedIndex; updateMenuHeader(menuRetracementsUptrend, 'トレンドの種類'); } }); updateMenuHeader(menuRetracementsUptrend, 'トレンドの種類'); let menuRetracementsLabelPosition = new input.Menu('#retracementsLabelPosition', { header: 'ラベルの位置', itemClicked: (s) => { retracements.labelPosition = s.selectedValue; updateMenuHeader(menuRetracementsLabelPosition, 'ラベルの位置'); } }); updateMenuHeader(menuRetracementsLabelPosition, 'ラベルの位置'); //arcs properties let menuArcsLabelPosition = new input.Menu('#arcsLabelPosition', { header: 'ラベルの位置', itemClicked: (s) => { arcs.labelPosition = s.selectedValue; updateMenuHeader(menuArcsLabelPosition, 'ラベルの位置'); } }); updateMenuHeader(menuArcsLabelPosition, 'ラベルの位置'); let inputArcsStartX = new input.InputNumber('#arcsStartX', { value: 46, step: 1, valueChanged: s => { arcs.start.x = s.value; theChart.invalidate(); } }); let inputArcsStartY = new input.InputNumber('#arcsStartY', { value: 19.75, step: 1, valueChanged: s => { arcs.start.y = s.value; theChart.invalidate(); } }); let inputArcsEndX = new input.InputNumber('#arcsEndX', { value: 54, step: 1, valueChanged: s => { arcs.end.x = s.value; theChart.invalidate(); } }); let inputArcsEndY = new input.InputNumber('#arcsEndY', { value: 17.1, step: 1, valueChanged: s => { arcs.end.y = s.value; theChart.invalidate(); } }); //fans properties let menuFansLabelPosition = new input.Menu('#fansLabelPosition', { header: 'ラベルの位置', itemClicked: (s) => { fans.labelPosition = s.selectedValue; updateMenuHeader(menuFansLabelPosition, 'ラベルの位置'); } }); updateMenuHeader(menuFansLabelPosition, 'ラベルの位置'); let inputFansStartX = new input.InputNumber('#fansStartX', { value: 10, step: 1, valueChanged: s => { fans.start.x = s.value; theChart.invalidate(); } }); let inputFansStartY = new input.InputNumber('#fansStartY', { value: 18.12, step: 1, valueChanged: s => { fans.start.y = s.value; theChart.invalidate(); } }); let inputFansEndX = new input.InputNumber('#fansEndX', { value: 32, step: 1, valueChanged: s => { fans.end.x = s.value; theChart.invalidate(); } }); let inputFansEndY = new input.InputNumber('#fansEndY', { value: 20.53, step: 1, valueChanged: s => { fans.end.y = s.value; theChart.invalidate(); } }); //timeZones properties let menuTimeZonesLabelPosition = new input.Menu('#timeZonesLabelPosition', { header: 'ラベルの位置', itemClicked: (s) => { timeZones.labelPosition = s.selectedValue; updateMenuHeader(menuTimeZonesLabelPosition, 'ラベルの位置'); } }); updateMenuHeader(menuTimeZonesLabelPosition, 'ラベルの位置'); let inputTimeZonesStartX = new input.InputNumber('#timezonesStartX', { value: 0, step: 1, valueChanged: s => { timeZones.startX = s.value; theChart.invalidate(); } }); let inputTimeZonesEndX = new input.InputNumber('#timezonesEndX', { value: 3, step: 1, valueChanged: s => { timeZones.endX = s.value; theChart.invalidate(); } }); } // function getRandomPalette() { let palettes = Object.getOwnPropertyNames(chart.Palettes) .filter(prop => typeof chart.Palettes[prop] === "object" && prop !== 'prototype'); let rand = Math.floor(Math.random() * palettes.length); // return chart.Palettes[palettes[rand]]; } // show menu header and current value function updateMenuHeader(menu, header) { menu.header = header ? header + ': <b>' + menu.text + '</b>' : menu.text; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Fibonacci Tools</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <!-- Settings --> <div class="panel-group" id="settingsShort"> <div class="panel panel-default"> <div id="settingsBody" class="panel-collapse collapse in"> <div class="panel-body"> <!-- Type Selector --> <ul class="list-inline ul-type"> <li> <select id="type"> <option value="retracements" selected="selected">リトレースメント</option> <option value="arcs">アーク</option> <option value="fans">ファン</option> <option value="timeZones">タイムゾーン</option> </select> </li> </ul> <!-- Retracements Properties--> <ul class="list-inline ul-properties ul-retracements"> <li> <select id="uptrend"> <option value="false">下降トレンド</option> <option value="true" selected="selected">上昇トレンド</option> </select> </li> <li> <select id="retracementsLabelPosition"> <option value="Left" selected="selected">左</option> <option value="Center">中央</option> <option value="Right">右</option> </select> </li> </ul> <!-- Arcs Properties --> <ul class="list-inline ul-properties ul-arcs"> <li> <select id="arcsLabelPosition"> <option value="None">なし</option> <option value="Top" selected="selected">上</option> <option value="Center">中央</option> <option value="Bottom">下</option> </select> </li> </ul> <ul class="list-inline ul-properties ul-arcs"> <li> <label>Xの開始位置</label> <input id="arcsStartX" /> </li> <li> <label>Yの開始位置</label> <input id="arcsStartY" /> </li> </ul> <ul class="list-inline ul-properties ul-arcs"> <li> <label>Xの終了位置</label> <input id="arcsEndX" /> </li> <li> <label>Yの終了位置</label> <input id="arcsEndY" /> </li> </ul> <!-- Fans Properties --> <ul class="list-inline ul-properties ul-fans"> <li> <select id="fansLabelPosition"> <option value="None">なし</option> <option value="Top" selected="selected">上</option> <option value="Center">中央</option> <option value="Bottom">下</option> </select> </li> </ul> <ul class="list-inline ul-properties ul-fans"> <li> <label>Xの開始位置</label> <input id="fansStartX" /> </li> <li> <label>Yの開始位置</label> <input id="fansStartY" /> </li> </ul> <ul class="list-inline ul-properties ul-fans"> <li> <label>Xの終了位置</label> <input id="fansEndX" /> </li> <li> <label>Yの終了位置</label> <input id="fansEndY" /> </li> </ul> <!-- Time zones Properties --> <ul class="list-inline ul-properties ul-timezones"> <li> <select id="timeZonesLabelPosition"> <option value="None">なし</option> <option value="Left">左</option> <option value="Center">中央</option> <option value="Right" selected="selected">右</option> </select> </li> </ul> <ul class="list-inline ul-properties ul-timezones"> <li> <label>Xの開始位置</label> <input id="timezonesStartX" /> </li> <li> <label>Xの終了位置</label> <input id="timezonesEndX" /> </li> </ul> </div> </div> </div> </div> <div id="theChart"></div> </div> </body> </html> // some stock data from Google Finance export function getData() { return [ { "date": "01/23/15", "open": 20.2, "high": 24.73, "low": 20.16, "close": 23.23, "volume": 42593223 }, { "date": "01/26/15", "open": 23.67, "high": 24.39, "low": 22.5, "close": 22.6, "volume": 8677164 }, { "date": "01/27/15", "open": 22, "high": 22.47, "low": 21.17, "close": 21.3, "volume": 3272512 }, { "date": "01/28/15", "open": 21.62, "high": 21.84, "low": 19.6, "close": 19.78, "volume": 5047364 }, { "date": "01/29/15", "open": 19.9, "high": 19.95, "low": 18.51, "close": 18.8, "volume": 3419482 }, { "date": "01/30/15", "open": 18.47, "high": 19.48, "low": 18.22, "close": 18.81, "volume": 2266439 }, { "date": "02/02/15", "open": 19.18, "high": 19.3, "low": 18.01, "close": 18.02, "volume": 2071168 }, { "date": "02/03/15", "open": 18.22, "high": 18.64, "low": 18.12, "close": 18.24, "volume": 1587435 }, { "date": "02/04/15", "open": 18.2, "high": 18.35, "low": 17, "close": 17.1, "volume": 2912224 }, { "date": "02/05/15", "open": 17.3, "high": 17.31, "low": 16.41, "close": 16.66, "volume": 2682187 }, { "date": "02/06/15", "open": 17.39, "high": 18.88, "low": 17.21, "close": 18.12, "volume": 3929164 }, { "date": "02/09/15", "open": 18.86, "high": 19.95, "low": 18.45, "close": 19.6, "volume": 3226650 }, { "date": "02/10/15", "open": 20.5, "high": 21, "low": 19.63, "close": 20.99, "volume": 2804409 }, { "date": "02/11/15", "open": 20.89, "high": 21, "low": 20.2, "close": 20.96, "volume": 1698365 }, { "date": "02/12/15", "open": 20.66, "high": 20.85, "low": 19.75, "close": 20.17, "volume": 1370320 }, { "date": "02/13/15", "open": 20.19, "high": 20.68, "low": 20, "close": 20.18, "volume": 711951 }, { "date": "02/17/15", "open": 19.5, "high": 20.1, "low": 18.8, "close": 19.05, "volume": 2093602 }, { "date": "02/18/15", "open": 18.31, "high": 18.5, "low": 17.96, "close": 18, "volume": 1849490 }, { "date": "02/19/15", "open": 18.33, "high": 19.25, "low": 17.91, "close": 18.96, "volume": 1311518 }, { "date": "02/20/15", "open": 18.68, "high": 19.3, "low": 18.65, "close": 18.85, "volume": 1001692 }, { "date": "02/23/15", "open": 18.8, "high": 18.89, "low": 18.11, "close": 18.21, "volume": 670087 }, { "date": "02/24/15", "open": 18.46, "high": 19, "low": 18.27, "close": 18.83, "volume": 759263 }, { "date": "02/25/15", "open": 18.83, "high": 19.48, "low": 18.47, "close": 18.67, "volume": 915580 }, { "date": "02/26/15", "open": 18.64, "high": 19.2, "low": 18.64, "close": 18.94, "volume": 461283 }, { "date": "02/27/15", "open": 18.8, "high": 19.12, "low": 18.55, "close": 18.66, "volume": 617199 }, { "date": "03/02/15", "open": 18.66, "high": 19.09, "low": 18.65, "close": 18.79, "volume": 519605 }, { "date": "03/03/15", "open": 18.79, "high": 19.21, "low": 18.45, "close": 18.59, "volume": 832415 }, { "date": "03/04/15", "open": 18.64, "high": 19.05, "low": 18.32, "close": 19, "volume": 539688 }, { "date": "03/05/15", "open": 19.2, "high": 19.2, "low": 18.8, "close": 19.14, "volume": 486149 }, { "date": "03/06/15", "open": 19.03, "high": 19.1, "low": 18.7, "close": 18.91, "volume": 685659 }, { "date": "03/09/15", "open": 18.98, "high": 20.15, "low": 18.96, "close": 19.4, "volume": 1321363 }, { "date": "03/10/15", "open": 19.3, "high": 19.8, "low": 18.85, "close": 19.64, "volume": 615743 }, { "date": "03/11/15", "open": 20.08, "high": 20.65, "low": 19.24, "close": 20.53, "volume": 2167167 }, { "date": "03/12/15", "open": 17.17, "high": 18.2, "low": 16.76, "close": 18.2, "volume": 6837638 }, { "date": "03/13/15", "open": 18.05, "high": 18.05, "low": 17.3, "close": 17.88, "volume": 1715629 }, { "date": "03/16/15", "open": 17.91, "high": 18, "low": 17.01, "close": 17.13, "volume": 1321313 }, { "date": "03/17/15", "open": 17.28, "high": 17.37, "low": 16.6, "close": 17.12, "volume": 1272242 }, { "date": "03/18/15", "open": 17.1, "high": 17.27, "low": 16.91, "close": 17.01, "volume": 530063 }, { "date": "03/19/15", "open": 17, "high": 17.28, "low": 17, "close": 17.06, "volume": 536427 }, { "date": "03/20/15", "open": 17.13, "high": 17.24, "low": 16.88, "close": 17.21, "volume": 1320237 }, { "date": "03/23/15", "open": 17.21, "high": 17.23, "low": 17.01, "close": 17.11, "volume": 509798 }, { "date": "03/24/15", "open": 17.02, "high": 17.18, "low": 16.82, "close": 17, "volume": 962149 }, { "date": "03/25/15", "open": 16.92, "high": 16.99, "low": 16.82, "close": 16.97, "volume": 565673 }, { "date": "03/26/15", "open": 16.83, "high": 17.56, "low": 16.83, "close": 17.54, "volume": 884523 }, { "date": "03/27/15", "open": 17.58, "high": 18.3, "low": 17.11, "close": 18.3, "volume": 705626 }, { "date": "03/30/15", "open": 18.5, "high": 19.4, "low": 18.4, "close": 19.05, "volume": 1151620 }, { "date": "03/31/15", "open": 19.08, "high": 20.58, "low": 18.4, "close": 19.75, "volume": 2020679 }, { "date": "04/01/15", "open": 19.69, "high": 19.69, "low": 18.55, "close": 18.65, "volume": 961078 }, { "date": "04/02/15", "open": 18.56, "high": 18.66, "low": 17.85, "close": 17.9, "volume": 884233 }, { "date": "04/06/15", "open": 17.78, "high": 17.94, "low": 17.51, "close": 17.66, "volume": 605252 }, { "date": "04/07/15", "open": 17.62, "high": 17.9, "low": 17.53, "close": 17.61, "volume": 591988 }, { "date": "04/08/15", "open": 17.64, "high": 17.85, "low": 17.32, "close": 17.36, "volume": 618855 }, { "date": "04/09/15", "open": 17.33, "high": 17.54, "low": 17.1, "close": 17.1, "volume": 761855 }, { "date": "04/10/15", "open": 17.08, "high": 17.36, "low": 17, "close": 17.05, "volume": 568373 }, { "date": "04/13/15", "open": 17.24, "high": 17.26, "low": 16.81, "close": 17.1, "volume": 667142 }, { "date": "04/14/15", "open": 17.1, "high": 17.89, "low": 17.02, "close": 17.52, "volume": 870138 }, { "date": "04/15/15", "open": 17.6, "high": 17.99, "low": 17.5, "close": 17.69, "volume": 530456 }, { "date": "04/16/15", "open": 17.95, "high": 18, "low": 17.6, "close": 17.82, "volume": 548730 }, { "date": "04/17/15", "open": 17.75, "high": 17.79, "low": 17.5, "close": 17.79, "volume": 446373 }, { "date": "04/20/15", "open": 17.63, "high": 17.98, "low": 17.52, "close": 17.93, "volume": 487017 }, { "date": "04/21/15", "open": 17.96, "high": 17.98, "low": 17.71, "close": 17.92, "volume": 320302 }, { "date": "04/22/15", "open": 17.88, "high": 18.33, "low": 17.57, "close": 18.29, "volume": 644812 }, { "date": "04/23/15", "open": 18.29, "high": 18.61, "low": 18.18, "close": 18.28, "volume": 563879 }, { "date": "04/24/15", "open": 18.5, "high": 18.5, "low": 17.61, "close": 17.75, "volume": 650762 }, { "date": "04/27/15", "open": 17.97, "high": 18.05, "low": 17.45, "close": 17.57, "volume": 437294 }, { "date": "04/28/15", "open": 17.65, "high": 17.79, "low": 17.39, "close": 17.5, "volume": 224519 }, { "date": "04/29/15", "open": 17.68, "high": 17.68, "low": 17.1, "close": 17.21, "volume": 495706 }, { "date": "04/30/15", "open": 17.22, "high": 17.3, "low": 17, "close": 17.11, "volume": 391040 }, { "date": "05/01/15", "open": 17.11, "high": 17.55, "low": 16.85, "close": 17.5, "volume": 563075 }, { "date": "05/04/15", "open": 17.56, "high": 17.85, "low": 17.3, "close": 17.4, "volume": 253138 }, { "date": "05/05/15", "open": 17.68, "high": 17.68, "low": 17.09, "close": 17.43, "volume": 290935 }, { "date": "05/06/15", "open": 17.48, "high": 17.48, "low": 17, "close": 17.04, "volume": 313662 }, { "date": "05/07/15", "open": 17.05, "high": 17.19, "low": 16.92, "close": 17.04, "volume": 360284 }, { "date": "05/08/15", "open": 17.13, "high": 17.21, "low": 16.91, "close": 17.1, "volume": 297653 }, { "date": "05/11/15", "open": 17.16, "high": 17.44, "low": 17.13, "close": 17.31, "volume": 268504 }, { "date": "05/12/15", "open": 17.28, "high": 17.44, "low": 16.99, "close": 17.24, "volume": 376961 }, { "date": "05/13/15", "open": 17.24, "high": 17.3, "low": 17.06, "close": 17.2, "volume": 244617 }, { "date": "05/14/15", "open": 17.24, "high": 17.25, "low": 17.02, "close": 17.08, "volume": 252526 }, { "date": "05/15/15", "open": 17.06, "high": 17.16, "low": 16.95, "close": 16.95, "volume": 274783 }, { "date": "05/18/15", "open": 16.95, "high": 17.01, "low": 16.76, "close": 16.87, "volume": 418513 }, { "date": "05/19/15", "open": 16.93, "high": 16.94, "low": 16.6, "close": 16.83, "volume": 367660 }, { "date": "05/20/15", "open": 16.8, "high": 16.9, "low": 16.65, "close": 16.86, "volume": 297914 }, { "date": "05/21/15", "open": 16.9, "high": 17.08, "low": 16.79, "close": 16.88, "volume": 229346 }, { "date": "05/22/15", "open": 16.9, "high": 17.05, "low": 16.85, "close": 17, "volume": 253279 }, { "date": "05/26/15", "open": 17.03, "high": 17.08, "low": 16.86, "close": 17.01, "volume": 212640 }, { "date": "05/27/15", "open": 17.01, "high": 17.99, "low": 16.87, "close": 17.75, "volume": 857109 }, { "date": "05/28/15", "open": 17.77, "high": 17.77, "low": 17.44, "close": 17.62, "volume": 338482 } ]; } .wj-flexchart { height: 300px; } body { margin-bottom: 24pt; } #iChart { height: 200px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, Inject, enableProdMode, NgModule, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; import { WjChartModule } from '@grapecity/wijmo.angular2.chart'; import { WjChartFinanceModule } from '@grapecity/wijmo.angular2.chart.finance'; import { WjChartInteractionModule } from '@grapecity/wijmo.angular2.chart.interaction'; import { WjChartAnnotationModule } from '@grapecity/wijmo.angular2.chart.annotation'; import { WjChartFinanceAnalyticsModule } from '@grapecity/wijmo.angular2.chart.finance.analytics'; import { DataService } from './app.data'; import * as wjChart from '@grapecity/wijmo.chart'; import * as wjChartFinance from '@grapecity/wijmo.chart.finance'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; palette: any; tooltip: string; selectedFib: string; properties: any; // references control in the view @ViewChild('theChart') theChart: wjChartFinance.FinancialChart; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); this.palette = this.getRandomPalette(); this.tooltip = '<b>日付:{date:m}</b><br/>' + '<table>' + '<tr><td>高値</td><td>{high:c}</td><tr/>' + '<tr><td>安値</td><td>{low:c}</td><tr/>' + '<tr><td>始値</td><td>{open:c}</td><tr/>' + '<tr><td>終値</td><td>{close:c}</td><tr/>' + '</table>'; this.selectedFib = 'retracements'; this.properties = { retracements: { labelPosition: 'Left', uptrend: true, }, arcs: { labelPosition: 'Top', start: new wjChart.DataPoint(46, 19.75), end: new wjChart.DataPoint(54, 17.1) }, fans: { labelPosition: 'Top', start: new wjChart.DataPoint(10, 18.12), end: new wjChart.DataPoint(32, 20.53) }, timeZones: { labelPosition: 'Right', start: 0, end: 3 } }; } // valueChanged() { if (this.theChart) { this.theChart.invalidate(); } } // getRandomPalette() { let palettes = Object.getOwnPropertyNames(wjChart.Palettes) .filter(prop => typeof wjChart.Palettes[prop] === "object" && prop !== 'prototype'); let rand = Math.floor(Math.random() * palettes.length); // return wjChart.Palettes[palettes[rand]]; } } // @NgModule({ imports: [WjInputModule, WjChartModule, WjChartFinanceModule, WjChartInteractionModule, WjChartAnnotationModule, WjChartFinanceAnalyticsModule, BrowserModule], declarations: [AppComponent], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Fibonacci Tools</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <!-- Settings --> <div class="panel-group" id="settings"> <div class="panel panel-default"> <div id="settingsBody" class="panel-collapse collapse in"> <div class="panel-body"> <!-- General--> <ul class="list-inline"> <li> <wj-menu #type header="種類" [(value)]="selectedFib"> <wj-menu-item value="arcs">アーク</wj-menu-item> <wj-menu-item value="fans">ファン</wj-menu-item> <wj-menu-item value="retracements">リトレースメント</wj-menu-item> <wj-menu-item value="timeZones">タイムゾーン</wj-menu-item> </wj-menu> </li> </ul> <!-- Retracements --> <ul class="list-inline" *ngIf="selectedFib === 'retracements'"> <li> <wj-menu header="トレンドの種類" [(value)]="properties.retracements.uptrend"> <wj-menu-item [value]="true">上昇トレンド</wj-menu-item> <wj-menu-item [value]="false">下降トレンド</wj-menu-item> </wj-menu> </li> <li> <wj-menu header="ラベルの位置" [(value)]="properties.retracements.labelPosition"> <wj-menu-item value="Left">左</wj-menu-item> <wj-menu-item value="Center">中央</wj-menu-item> <wj-menu-item value="Right">右</wj-menu-item> </wj-menu> </li> </ul> <!-- Arcs --> <ul class="list-inline" *ngIf="selectedFib === 'arcs'"> <wj-menu header="ラベルの位置" [(value)]="properties.arcs.labelPosition"> <wj-menu-item value="None">なし</wj-menu-item> <wj-menu-item value="Top">上</wj-menu-item> <wj-menu-item value="Center">中央</wj-menu-item> <wj-menu-item value="Bottom">下</wj-menu-item> </wj-menu> </ul> <ul class="list-inline" *ngIf="selectedFib === 'arcs'"> <li> <label>Xの開始位置</label> <wj-input-number [(value)]="properties.arcs.start.x" [step]="1" (valueChanged)="valueChanged()"></wj-input-number> </li> <li> <label>Yの開始位置</label> <wj-input-number [(value)]="properties.arcs.start.y" [step]="1" (valueChanged)="valueChanged()"></wj-input-number> </li> </ul> <ul class="list-inline" *ngIf="selectedFib === 'arcs'"> <li> <label>Xの終了位置</label> <wj-input-number [(value)]="properties.arcs.end.x" [step]="1" (valueChanged)="valueChanged()"></wj-input-number> </li> <li> <label>Yの終了位置</label> <wj-input-number [(value)]="properties.arcs.end.y" [step]="1" (valueChanged)="valueChanged()"></wj-input-number> </li> </ul> <!-- Fans --> <ul class="list-inline" *ngIf="selectedFib === 'fans'"> <wj-menu header="ラベルの位置" [(value)]="properties.fans.labelPosition"> <wj-menu-item value="None">なし</wj-menu-item> <wj-menu-item value="Top">上</wj-menu-item> <wj-menu-item value="Center">中央</wj-menu-item> <wj-menu-item value="Bottom">下</wj-menu-item> </wj-menu> </ul> <ul class="list-inline" *ngIf="selectedFib === 'fans'"> <li> <label>Xの開始位置</label> <wj-input-number [(value)]="properties.fans.start.x" [step]="1" (valueChanged)="valueChanged()"></wj-input-number> </li> <li> <label>Yの開始位置</label> <wj-input-number [(value)]="properties.fans.start.y" [step]="1" (valueChanged)="valueChanged()"></wj-input-number> </li> </ul> <ul class="list-inline" *ngIf="selectedFib === 'fans'"> <li> <label>Xの終了位置</label> <wj-input-number [(value)]="properties.fans.end.x" [step]="1" (valueChanged)="valueChanged()"></wj-input-number> </li> <li> <label>Yの終了位置</label> <wj-input-number [(value)]="properties.fans.end.y" [step]="1" (valueChanged)="valueChanged()"></wj-input-number> </li> </ul> <!-- Time Zones --> <ul class="list-inline" *ngIf="selectedFib === 'timeZones'"> <wj-menu header="ラベルの位置" [(value)]="properties.timeZones.labelPosition"> <wj-menu-item value="None">なし</wj-menu-item> <wj-menu-item value="Left">左</wj-menu-item> <wj-menu-item value="Center">中央</wj-menu-item> <wj-menu-item value="Right">右</wj-menu-item> </wj-menu> </ul> <ul class="list-inline" *ngIf="selectedFib === 'timeZones'"> <li> <label>Xの開始位置</label> <wj-input-number [(value)]="properties.timeZones.start" [step]="1" (valueChanged)="valueChanged()"></wj-input-number> </li> <li> <label>Xの終了位置</label> <wj-input-number [(value)]="properties.timeZones.end" [step]="1" (valueChanged)="valueChanged()"></wj-input-number> </li> </ul> </div> </div> </div> </div> <wj-financial-chart #theChart [itemsSource]="data" bindingX="date" [symbolSize]="6" [tooltipContent]="tooltip" chartType="Candlestick" [palette]="palette"> <wj-financial-chart-series binding="high,low,open,close" name="Box Inc"> </wj-financial-chart-series> <wj-flex-chart-fibonacci binding="close" [symbolSize]="1" name="リトレースメント" [style]="{ fill: 'red', stroke: 'red', strokeWidth:0.5, fontSize:10 }" [labelPosition]="properties.retracements.labelPosition" [uptrend]="properties.retracements.uptrend" [visibility]="selectedFib === 'retracements' ? 'Visible' : 'Hidden'"> </wj-flex-chart-fibonacci> <wj-flex-chart-fibonacci-arcs binding="close" name="アーク" [start]="properties.arcs.start" [end]="properties.arcs.end" [labelPosition]="properties.arcs.labelPosition" [visibility]="selectedFib === 'arcs' ? 'Visible' : 'Hidden'"> </wj-flex-chart-fibonacci-arcs> <wj-flex-chart-fibonacci-fans binding="close" name="ファン" [start]="properties.fans.start" [end]="properties.fans.end" [labelPosition]="properties.fans.labelPosition" [visibility]="selectedFib === 'fans' ? 'Visible' : 'Hidden'"> </wj-flex-chart-fibonacci-fans> <wj-flex-chart-fibonacci-time-zones binding="close" name="タイムゾーン" [startX]="properties.timeZones.start" [endX]="properties.timeZones.end" [labelPosition]="properties.timeZones.labelPosition" [visibility]="selectedFib === 'timeZones' ? 'Visible' : 'Hidden'"> </wj-flex-chart-fibonacci-time-zones> </wj-financial-chart> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getData() { return [ { "date": "01/23/15", "open": 20.2, "high": 24.73, "low": 20.16, "close": 23.23, "volume": 42593223 }, { "date": "01/26/15", "open": 23.67, "high": 24.39, "low": 22.5, "close": 22.6, "volume": 8677164 }, { "date": "01/27/15", "open": 22, "high": 22.47, "low": 21.17, "close": 21.3, "volume": 3272512 }, { "date": "01/28/15", "open": 21.62, "high": 21.84, "low": 19.6, "close": 19.78, "volume": 5047364 }, { "date": "01/29/15", "open": 19.9, "high": 19.95, "low": 18.51, "close": 18.8, "volume": 3419482 }, { "date": "01/30/15", "open": 18.47, "high": 19.48, "low": 18.22, "close": 18.81, "volume": 2266439 }, { "date": "02/02/15", "open": 19.18, "high": 19.3, "low": 18.01, "close": 18.02, "volume": 2071168 }, { "date": "02/03/15", "open": 18.22, "high": 18.64, "low": 18.12, "close": 18.24, "volume": 1587435 }, { "date": "02/04/15", "open": 18.2, "high": 18.35, "low": 17, "close": 17.1, "volume": 2912224 }, { "date": "02/05/15", "open": 17.3, "high": 17.31, "low": 16.41, "close": 16.66, "volume": 2682187 }, { "date": "02/06/15", "open": 17.39, "high": 18.88, "low": 17.21, "close": 18.12, "volume": 3929164 }, { "date": "02/09/15", "open": 18.86, "high": 19.95, "low": 18.45, "close": 19.6, "volume": 3226650 }, { "date": "02/10/15", "open": 20.5, "high": 21, "low": 19.63, "close": 20.99, "volume": 2804409 }, { "date": "02/11/15", "open": 20.89, "high": 21, "low": 20.2, "close": 20.96, "volume": 1698365 }, { "date": "02/12/15", "open": 20.66, "high": 20.85, "low": 19.75, "close": 20.17, "volume": 1370320 }, { "date": "02/13/15", "open": 20.19, "high": 20.68, "low": 20, "close": 20.18, "volume": 711951 }, { "date": "02/17/15", "open": 19.5, "high": 20.1, "low": 18.8, "close": 19.05, "volume": 2093602 }, { "date": "02/18/15", "open": 18.31, "high": 18.5, "low": 17.96, "close": 18, "volume": 1849490 }, { "date": "02/19/15", "open": 18.33, "high": 19.25, "low": 17.91, "close": 18.96, "volume": 1311518 }, { "date": "02/20/15", "open": 18.68, "high": 19.3, "low": 18.65, "close": 18.85, "volume": 1001692 }, { "date": "02/23/15", "open": 18.8, "high": 18.89, "low": 18.11, "close": 18.21, "volume": 670087 }, { "date": "02/24/15", "open": 18.46, "high": 19, "low": 18.27, "close": 18.83, "volume": 759263 }, { "date": "02/25/15", "open": 18.83, "high": 19.48, "low": 18.47, "close": 18.67, "volume": 915580 }, { "date": "02/26/15", "open": 18.64, "high": 19.2, "low": 18.64, "close": 18.94, "volume": 461283 }, { "date": "02/27/15", "open": 18.8, "high": 19.12, "low": 18.55, "close": 18.66, "volume": 617199 }, { "date": "03/02/15", "open": 18.66, "high": 19.09, "low": 18.65, "close": 18.79, "volume": 519605 }, { "date": "03/03/15", "open": 18.79, "high": 19.21, "low": 18.45, "close": 18.59, "volume": 832415 }, { "date": "03/04/15", "open": 18.64, "high": 19.05, "low": 18.32, "close": 19, "volume": 539688 }, { "date": "03/05/15", "open": 19.2, "high": 19.2, "low": 18.8, "close": 19.14, "volume": 486149 }, { "date": "03/06/15", "open": 19.03, "high": 19.1, "low": 18.7, "close": 18.91, "volume": 685659 }, { "date": "03/09/15", "open": 18.98, "high": 20.15, "low": 18.96, "close": 19.4, "volume": 1321363 }, { "date": "03/10/15", "open": 19.3, "high": 19.8, "low": 18.85, "close": 19.64, "volume": 615743 }, { "date": "03/11/15", "open": 20.08, "high": 20.65, "low": 19.24, "close": 20.53, "volume": 2167167 }, { "date": "03/12/15", "open": 17.17, "high": 18.2, "low": 16.76, "close": 18.2, "volume": 6837638 }, { "date": "03/13/15", "open": 18.05, "high": 18.05, "low": 17.3, "close": 17.88, "volume": 1715629 }, { "date": "03/16/15", "open": 17.91, "high": 18, "low": 17.01, "close": 17.13, "volume": 1321313 }, { "date": "03/17/15", "open": 17.28, "high": 17.37, "low": 16.6, "close": 17.12, "volume": 1272242 }, { "date": "03/18/15", "open": 17.1, "high": 17.27, "low": 16.91, "close": 17.01, "volume": 530063 }, { "date": "03/19/15", "open": 17, "high": 17.28, "low": 17, "close": 17.06, "volume": 536427 }, { "date": "03/20/15", "open": 17.13, "high": 17.24, "low": 16.88, "close": 17.21, "volume": 1320237 }, { "date": "03/23/15", "open": 17.21, "high": 17.23, "low": 17.01, "close": 17.11, "volume": 509798 }, { "date": "03/24/15", "open": 17.02, "high": 17.18, "low": 16.82, "close": 17, "volume": 962149 }, { "date": "03/25/15", "open": 16.92, "high": 16.99, "low": 16.82, "close": 16.97, "volume": 565673 }, { "date": "03/26/15", "open": 16.83, "high": 17.56, "low": 16.83, "close": 17.54, "volume": 884523 }, { "date": "03/27/15", "open": 17.58, "high": 18.3, "low": 17.11, "close": 18.3, "volume": 705626 }, { "date": "03/30/15", "open": 18.5, "high": 19.4, "low": 18.4, "close": 19.05, "volume": 1151620 }, { "date": "03/31/15", "open": 19.08, "high": 20.58, "low": 18.4, "close": 19.75, "volume": 2020679 }, { "date": "04/01/15", "open": 19.69, "high": 19.69, "low": 18.55, "close": 18.65, "volume": 961078 }, { "date": "04/02/15", "open": 18.56, "high": 18.66, "low": 17.85, "close": 17.9, "volume": 884233 }, { "date": "04/06/15", "open": 17.78, "high": 17.94, "low": 17.51, "close": 17.66, "volume": 605252 }, { "date": "04/07/15", "open": 17.62, "high": 17.9, "low": 17.53, "close": 17.61, "volume": 591988 }, { "date": "04/08/15", "open": 17.64, "high": 17.85, "low": 17.32, "close": 17.36, "volume": 618855 }, { "date": "04/09/15", "open": 17.33, "high": 17.54, "low": 17.1, "close": 17.1, "volume": 761855 }, { "date": "04/10/15", "open": 17.08, "high": 17.36, "low": 17, "close": 17.05, "volume": 568373 }, { "date": "04/13/15", "open": 17.24, "high": 17.26, "low": 16.81, "close": 17.1, "volume": 667142 }, { "date": "04/14/15", "open": 17.1, "high": 17.89, "low": 17.02, "close": 17.52, "volume": 870138 }, { "date": "04/15/15", "open": 17.6, "high": 17.99, "low": 17.5, "close": 17.69, "volume": 530456 }, { "date": "04/16/15", "open": 17.95, "high": 18, "low": 17.6, "close": 17.82, "volume": 548730 }, { "date": "04/17/15", "open": 17.75, "high": 17.79, "low": 17.5, "close": 17.79, "volume": 446373 }, { "date": "04/20/15", "open": 17.63, "high": 17.98, "low": 17.52, "close": 17.93, "volume": 487017 }, { "date": "04/21/15", "open": 17.96, "high": 17.98, "low": 17.71, "close": 17.92, "volume": 320302 }, { "date": "04/22/15", "open": 17.88, "high": 18.33, "low": 17.57, "close": 18.29, "volume": 644812 }, { "date": "04/23/15", "open": 18.29, "high": 18.61, "low": 18.18, "close": 18.28, "volume": 563879 }, { "date": "04/24/15", "open": 18.5, "high": 18.5, "low": 17.61, "close": 17.75, "volume": 650762 }, { "date": "04/27/15", "open": 17.97, "high": 18.05, "low": 17.45, "close": 17.57, "volume": 437294 }, { "date": "04/28/15", "open": 17.65, "high": 17.79, "low": 17.39, "close": 17.5, "volume": 224519 }, { "date": "04/29/15", "open": 17.68, "high": 17.68, "low": 17.1, "close": 17.21, "volume": 495706 }, { "date": "04/30/15", "open": 17.22, "high": 17.3, "low": 17, "close": 17.11, "volume": 391040 }, { "date": "05/01/15", "open": 17.11, "high": 17.55, "low": 16.85, "close": 17.5, "volume": 563075 }, { "date": "05/04/15", "open": 17.56, "high": 17.85, "low": 17.3, "close": 17.4, "volume": 253138 }, { "date": "05/05/15", "open": 17.68, "high": 17.68, "low": 17.09, "close": 17.43, "volume": 290935 }, { "date": "05/06/15", "open": 17.48, "high": 17.48, "low": 17, "close": 17.04, "volume": 313662 }, { "date": "05/07/15", "open": 17.05, "high": 17.19, "low": 16.92, "close": 17.04, "volume": 360284 }, { "date": "05/08/15", "open": 17.13, "high": 17.21, "low": 16.91, "close": 17.1, "volume": 297653 }, { "date": "05/11/15", "open": 17.16, "high": 17.44, "low": 17.13, "close": 17.31, "volume": 268504 }, { "date": "05/12/15", "open": 17.28, "high": 17.44, "low": 16.99, "close": 17.24, "volume": 376961 }, { "date": "05/13/15", "open": 17.24, "high": 17.3, "low": 17.06, "close": 17.2, "volume": 244617 }, { "date": "05/14/15", "open": 17.24, "high": 17.25, "low": 17.02, "close": 17.08, "volume": 252526 }, { "date": "05/15/15", "open": 17.06, "high": 17.16, "low": 16.95, "close": 16.95, "volume": 274783 }, { "date": "05/18/15", "open": 16.95, "high": 17.01, "low": 16.76, "close": 16.87, "volume": 418513 }, { "date": "05/19/15", "open": 16.93, "high": 16.94, "low": 16.6, "close": 16.83, "volume": 367660 }, { "date": "05/20/15", "open": 16.8, "high": 16.9, "low": 16.65, "close": 16.86, "volume": 297914 }, { "date": "05/21/15", "open": 16.9, "high": 17.08, "low": 16.79, "close": 16.88, "volume": 229346 }, { "date": "05/22/15", "open": 16.9, "high": 17.05, "low": 16.85, "close": 17, "volume": 253279 }, { "date": "05/26/15", "open": 17.03, "high": 17.08, "low": 16.86, "close": 17.01, "volume": 212640 }, { "date": "05/27/15", "open": 17.01, "high": 17.99, "low": 16.87, "close": 17.75, "volume": 857109 }, { "date": "05/28/15", "open": 17.77, "high": 17.77, "low": 17.44, "close": 17.62, "volume": 338482 } ]; } } .wj-flexchart { height: 300px; } body { margin-bottom: 24pt; } #iChart { height: 200px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wjChart from '@grapecity/wijmo.chart'; import * as Input from '@grapecity/wijmo.react.input'; import * as Finance from '@grapecity/wijmo.react.chart.finance'; import * as Analytics from '@grapecity/wijmo.react.chart.finance.analytics'; import { getData } from './data'; // class App extends React.Component { constructor(props) { super(props); this.state = { data: getData(), palette: this.getRandomPalette(), tooltip: '<b>日付:{date:m}</b><br/>' + '<table>' + '<tr><td>高値</td><td>{high:c}</td><tr/>' + '<tr><td>安値</td><td>{low:c}</td><tr/>' + '<tr><td>始値</td><td>{open:c}</td><tr/>' + '<tr><td>終値</td><td>{close:c}</td><tr/>' + '</table>', selectedFib: 'retracements', uptrend: 'True', properties: { retracements: { labelPosition: 'Left', labelPositionText: '左', uptrend: true, }, arcs: { labelPosition: 'Top', labelPositionText: '上', start: new wjChart.DataPoint(46, 19.75), end: new wjChart.DataPoint(54, 17.1) }, fans: { labelPosition: 'Top', labelPositionText: '上', start: new wjChart.DataPoint(10, 18.12), end: new wjChart.DataPoint(32, 20.53) }, timeZones: { labelPosition: 'Right', labelPositionText: '右', start: 0, end: 3 } } }; } render() { return <div className="container-fluid"> <div className="panel-group" id="settings"> <div className="panel panel-default"> <div id="settingsBody" className="panel-collapse collapse in"> <div className="panel-body"> <ul className="list-inline"> <li> <Input.Menu header="種類" value={this.state.selectedFib} itemClicked={this.typeClick.bind(this)}> <Input.MenuItem value="arcs">アーク</Input.MenuItem> <Input.MenuItem value="fans">ファン</Input.MenuItem> <Input.MenuItem value="retracements">リトレースメント</Input.MenuItem> <Input.MenuItem value="timeZones">タイムゾーン</Input.MenuItem> </Input.Menu> </li> </ul> <ul className="list-inline" style={{ display: this.state.selectedFib === 'retracements' ? "block" : "none" }}> <li> <Input.Menu header="トレンドの種類" value={this.state.properties.retracements.uptrend} itemClicked={this.uptrendChanged.bind(this)}> <Input.MenuItem value={true}>上昇トレンド</Input.MenuItem> <Input.MenuItem value={false}>下降トレンド</Input.MenuItem> </Input.Menu> </li> <li> <Input.Menu header="ラベルの位置" value={this.state.properties.retracements.labelPosition} itemClicked={this.rlpChanged.bind(this)}> <Input.MenuItem value="Left">左</Input.MenuItem> <Input.MenuItem value="Center">中央</Input.MenuItem> <Input.MenuItem value="Right">右</Input.MenuItem> </Input.Menu> </li> </ul> <ul className="list-inline" style={{ display: this.state.selectedFib === 'arcs' ? "block" : "none" }}> <Input.Menu header="ラベルの位置" value={this.state.properties.arcs.labelPosition} itemClicked={this.alpChanged.bind(this)}> <Input.MenuItem value="None">なし</Input.MenuItem> <Input.MenuItem value="Top">上</Input.MenuItem> <Input.MenuItem value="Center">中央</Input.MenuItem> <Input.MenuItem value="Bottom">下</Input.MenuItem> </Input.Menu> </ul> <ul className="list-inline" style={{ display: this.state.selectedFib === 'arcs' ? "block" : "none" }}> <li> <label> Xの開始位置 <Input.InputNumber value={this.state.properties.arcs.start.x} step={1} valueChanged={this.asxChanged.bind(this)}> </Input.InputNumber> </label> </li> <li> <label> Yの開始位置 <Input.InputNumber value={this.state.properties.arcs.start.y} step={1} valueChanged={this.asyChanged.bind(this)}> </Input.InputNumber> </label> </li> </ul> <ul className="list-inline" style={{ display: this.state.selectedFib === 'arcs' ? "block" : "none" }}> <li> <label> Xの終了位置 <Input.InputNumber value={this.state.properties.arcs.end.x} step={1} valueChanged={this.aexChanged.bind(this)}> </Input.InputNumber> </label> </li> <li> <label> Yの終了位置 <Input.InputNumber value={this.state.properties.arcs.end.y} step={1} valueChanged={this.aeyChanged.bind(this)}> </Input.InputNumber> </label> </li> </ul> <ul className="list-inline" style={{ display: this.state.selectedFib === 'fans' ? "block" : "none" }}> <Input.Menu header="ラベルの位置" value={this.state.properties.fans.labelPosition} itemClicked={this.flpChanged.bind(this)}> <Input.MenuItem value="None">なし</Input.MenuItem> <Input.MenuItem value="Top">上</Input.MenuItem> <Input.MenuItem value="Center">中央</Input.MenuItem> <Input.MenuItem value="Bottom">下</Input.MenuItem> </Input.Menu> </ul> <ul className="list-inline" style={{ display: this.state.selectedFib === 'fans' ? "block" : "none" }}> <li> <label> Xの開始位置 <Input.InputNumber value={this.state.properties.fans.start.x} step={1} valueChanged={this.fsxChanged.bind(this)}> </Input.InputNumber> </label> </li> <li> <label> Yの開始位置 <Input.InputNumber value={this.state.properties.fans.start.y} step={1} valueChanged={this.fsyChanged.bind(this)}> </Input.InputNumber> </label> </li> </ul> <ul className="list-inline" style={{ display: this.state.selectedFib === 'fans' ? "block" : "none" }}> <li> <label> Xの終了位置 <Input.InputNumber value={this.state.properties.fans.end.x} step={1} valueChanged={this.fexChanged.bind(this)}> </Input.InputNumber> </label> </li> <li> <label> Yの終了位置 <Input.InputNumber value={this.state.properties.fans.end.y} step={1} valueChanged={this.feyChanged.bind(this)}> </Input.InputNumber> </label> </li> </ul> <ul className="list-inline" style={{ display: this.state.selectedFib === 'timeZones' ? "block" : "none" }}> <Input.Menu header="ラベルの位置" value={this.state.properties.timeZones.labelPosition} itemClicked={this.tlpChanged.bind(this)}> <Input.MenuItem value="None">なし</Input.MenuItem> <Input.MenuItem value="Left">左</Input.MenuItem> <Input.MenuItem value="Center">中央</Input.MenuItem> <Input.MenuItem value="Right">右</Input.MenuItem> </Input.Menu> </ul> <ul className="list-inline" style={{ display: this.state.selectedFib === 'timeZones' ? "block" : "none" }}> <li> <label> Xの開始位置 <Input.InputNumber value={this.state.properties.timeZones.start} step={1} valueChanged={this.tsxChanged.bind(this)}> </Input.InputNumber> </label> </li> <li> <label> Xの終了位置 <Input.InputNumber value={this.state.properties.timeZones.end} step={1} valueChanged={this.texChanged.bind(this)}> </Input.InputNumber> </label> </li> </ul> </div> </div> </div> </div> <Finance.FinancialChart itemsSource={this.state.data} bindingX="date" symbolSize={6} tooltipContent="tooltip" chartType="Candlestick" palette={this.state.palette} initialized={this.initializeChart.bind(this)}> <Finance.FinancialChartSeries binding="high,low,open,close" name="Box Inc"></Finance.FinancialChartSeries> <Analytics.FlexChartFibonacci binding="close" symbolSize={1} name="リトレースメント" // style= "fill: 'red', stroke: 'red', strokeWidth:0.5, fontSize:10" labelPosition={this.state.properties.retracements.labelPosition} uptrend={this.state.properties.retracements.uptrend} visibility={this.state.selectedFib === 'retracements' ? 'Visible' : 'Hidden'}> </Analytics.FlexChartFibonacci> <Analytics.FlexChartFibonacciArcs binding="close" name="アーク" start={this.state.properties.arcs.start} end={this.state.properties.arcs.end} labelPosition={this.state.properties.arcs.labelPosition} visibility={this.state.selectedFib === 'arcs' ? 'Visible' : 'Hidden'}> </Analytics.FlexChartFibonacciArcs> <Analytics.FlexChartFibonacciFans binding="close" name="ファン" start={this.state.properties.fans.start} end={this.state.properties.fans.end} labelPosition={this.state.properties.fans.labelPosition} visibility={this.state.selectedFib === 'fans' ? 'Visible' : 'Hidden'}> </Analytics.FlexChartFibonacciFans> <Analytics.FlexChartFibonacciTimeZones binding="close" name="タイムゾーン" start={this.state.properties.timeZones.start} end={this.state.properties.timeZones.end} labelPosition={this.state.properties.timeZones.labelPosition} visibility={this.state.selectedFib === 'timeZones' ? 'Visible' : 'Hidden'}> </Analytics.FlexChartFibonacciTimeZones> </Finance.FinancialChart> </div>; } initializeChart(flex) { this.theChart = flex; } typeClick(menu) { if (menu.selectedItem != null) { this.setState({ selectedFib: menu.selectedValue }); } } uptrendChanged(menu) { if (menu.selectedItem != null) { this.setState({ uptrend: menu.selectedValue, properties: { retracements: { labelPosition: this.state.properties.retracements.labelPosition, uptrend: menu.selectedValue, }, arcs: this.state.properties.arcs, fans: this.state.properties.fans, timeZones: this.state.properties.timeZones } }); } } rlpChanged(menu) { if (menu.selectedValue != null) { this.setState({ properties: { retracements: { labelPosition: menu.selectedValue, labelPositionText: menu.text, uptrend: this.state.properties.retracements.uptrend }, arcs: this.state.properties.arcs, fans: this.state.properties.fans, timeZones: this.state.properties.timeZones } }); } } alpChanged(menu) { if (menu.selectedValue != null) { this.setState({ properties: { retracements: this.state.properties.retracements, arcs: { labelPosition: menu.selectedValue, labelPositionText: menu.text, start: this.state.properties.arcs.start, end: this.state.properties.arcs.end }, fans: this.state.properties.fans, timeZones: this.state.properties.timeZones } }); } } asxChanged(input) { this.setState({ properties: { retracements: this.state.properties.retracements, arcs: { labelPosition: this.state.properties.arcs.labelPosition, start: new wjChart.DataPoint(input.value, this.state.properties.arcs.start.y), end: this.state.properties.arcs.end }, fans: this.state.properties.fans, timeZones: this.state.properties.timeZones } }); if (this.theChart) { this.theChart.invalidate(); } } asyChanged(input) { this.setState({ properties: { retracements: this.state.properties.retracements, arcs: { labelPosition: this.state.properties.arcs.labelPosition, start: new wjChart.DataPoint(this.state.properties.arcs.start.x, input.value), end: this.state.properties.arcs.end }, fans: this.state.properties.fans, timeZones: this.state.properties.timeZones } }); if (this.theChart) { this.theChart.invalidate(); } } aexChanged(input) { this.setState({ properties: { retracements: this.state.properties.retracements, arcs: { labelPosition: this.state.properties.arcs.labelPosition, start: this.state.properties.arcs.start, end: new wjChart.DataPoint(input.value, this.state.properties.arcs.end.y) }, fans: this.state.properties.fans, timeZones: this.state.properties.timeZones } }); if (this.theChart) { this.theChart.invalidate(); } } aeyChanged(input) { this.setState({ properties: { retracements: this.state.properties.retracements, arcs: { labelPosition: this.state.properties.arcs.labelPosition, start: this.state.properties.arcs.start, end: new wjChart.DataPoint(this.state.properties.arcs.end.x, input.value) }, fans: this.state.properties.fans, timeZones: this.state.properties.timeZones } }); if (this.theChart) { this.theChart.invalidate(); } } flpChanged(menu) { if (menu.selectedValue != null) { this.setState({ properties: { retracements: this.state.properties.retracements, fans: { labelPosition: menu.selectedValue, labelPositionText: menu.text, start: this.state.properties.fans.start, end: this.state.properties.fans.end }, arcs: this.state.properties.arcs, timeZones: this.state.properties.timeZones } }); } } fsxChanged(input) { this.setState({ properties: { retracements: this.state.properties.retracements, fans: { labelPosition: this.state.properties.fans.labelPosition, start: new wjChart.DataPoint(input.value, this.state.properties.fans.start.y), end: this.state.properties.fans.end }, arcs: this.state.properties.arcs, timeZones: this.state.properties.timeZones } }); if (this.theChart) { this.theChart.invalidate(); } } fsyChanged(input) { this.setState({ properties: { retracements: this.state.properties.retracements, fans: { labelPosition: this.state.properties.fans.labelPosition, start: new wjChart.DataPoint(this.state.properties.fans.start.x, input.value), end: this.state.properties.fans.end }, arcs: this.state.properties.arcs, timeZones: this.state.properties.timeZones } }); if (this.theChart) { this.theChart.invalidate(); } } fexChanged(input) { this.setState({ properties: { retracements: this.state.properties.retracements, fans: { labelPosition: this.state.properties.fans.labelPosition, start: this.state.properties.fans.start, end: new wjChart.DataPoint(input.value, this.state.properties.fans.end.y) }, arcs: this.state.properties.arcs, timeZones: this.state.properties.timeZones } }); if (this.theChart) { this.theChart.invalidate(); } } feyChanged(input) { this.setState({ properties: { retracements: this.state.properties.retracements, fans: { labelPosition: this.state.properties.fans.labelPosition, start: this.state.properties.fans.start, end: new wjChart.DataPoint(this.state.properties.fans.end.x, input.value) }, arcs: this.state.properties.arcs, timeZones: this.state.properties.timeZones } }); if (this.theChart) { this.theChart.invalidate(); } } tlpChanged(menu) { if (menu.selectedValue != null) { this.setState({ properties: { retracements: this.state.properties.retracements, fans: this.state.properties.fans, arcs: this.state.properties.arcs, timeZones: { labelPosition: menu.selectedValue, labelPositionText: menu.text, start: this.state.properties.timeZones.start, end: this.state.properties.timeZones.end } } }); } } tsxChanged(input) { this.setState({ properties: { retracements: this.state.properties.retracements, fans: this.state.properties.fans, arcs: this.state.properties.arcs, timeZones: { labelPosition: this.state.properties.timeZones.labelPosition, start: input.value, end: this.state.properties.timeZones.end } } }); if (this.theChart) { this.theChart.invalidate(); } } texChanged(input) { this.setState({ properties: { retracements: this.state.properties.retracements, fans: this.state.properties.fans, arcs: this.state.properties.arcs, timeZones: { labelPosition: this.state.properties.timeZones.labelPosition, start: this.state.properties.timeZones.start, end: input.value } } }); if (this.theChart) { this.theChart.invalidate(); } } getRandomPalette() { let palettes = Object.getOwnPropertyNames(wjChart.Palettes) .filter(prop => typeof wjChart.Palettes[prop] === "object" && prop !== 'prototype'); let rand = Math.floor(Math.random() * palettes.length); // return wjChart.Palettes[palettes[rand]]; } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Pivot Chart Overview</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> body { margin-bottom: 24px; } label { margin-right: 3px; } #iChart { height: 200px; } export function getTypeData() { return [{ text: 'アーク', parm: 'arcs' }, { text: 'ファン', parm: 'fans' }, { text: 'リトレースメント', parm: 'retracements' }, { text: 'タイムゾーン', parm: 'timeZones' }]; } export function getData() { return [ { "date": "01/23/15", "open": 20.2, "high": 24.73, "low": 20.16, "close": 23.23, "volume": 42593223 }, { "date": "01/26/15", "open": 23.67, "high": 24.39, "low": 22.5, "close": 22.6, "volume": 8677164 }, { "date": "01/27/15", "open": 22, "high": 22.47, "low": 21.17, "close": 21.3, "volume": 3272512 }, { "date": "01/28/15", "open": 21.62, "high": 21.84, "low": 19.6, "close": 19.78, "volume": 5047364 }, { "date": "01/29/15", "open": 19.9, "high": 19.95, "low": 18.51, "close": 18.8, "volume": 3419482 }, { "date": "01/30/15", "open": 18.47, "high": 19.48, "low": 18.22, "close": 18.81, "volume": 2266439 }, { "date": "02/02/15", "open": 19.18, "high": 19.3, "low": 18.01, "close": 18.02, "volume": 2071168 }, { "date": "02/03/15", "open": 18.22, "high": 18.64, "low": 18.12, "close": 18.24, "volume": 1587435 }, { "date": "02/04/15", "open": 18.2, "high": 18.35, "low": 17, "close": 17.1, "volume": 2912224 }, { "date": "02/05/15", "open": 17.3, "high": 17.31, "low": 16.41, "close": 16.66, "volume": 2682187 }, { "date": "02/06/15", "open": 17.39, "high": 18.88, "low": 17.21, "close": 18.12, "volume": 3929164 }, { "date": "02/09/15", "open": 18.86, "high": 19.95, "low": 18.45, "close": 19.6, "volume": 3226650 }, { "date": "02/10/15", "open": 20.5, "high": 21, "low": 19.63, "close": 20.99, "volume": 2804409 }, { "date": "02/11/15", "open": 20.89, "high": 21, "low": 20.2, "close": 20.96, "volume": 1698365 }, { "date": "02/12/15", "open": 20.66, "high": 20.85, "low": 19.75, "close": 20.17, "volume": 1370320 }, { "date": "02/13/15", "open": 20.19, "high": 20.68, "low": 20, "close": 20.18, "volume": 711951 }, { "date": "02/17/15", "open": 19.5, "high": 20.1, "low": 18.8, "close": 19.05, "volume": 2093602 }, { "date": "02/18/15", "open": 18.31, "high": 18.5, "low": 17.96, "close": 18, "volume": 1849490 }, { "date": "02/19/15", "open": 18.33, "high": 19.25, "low": 17.91, "close": 18.96, "volume": 1311518 }, { "date": "02/20/15", "open": 18.68, "high": 19.3, "low": 18.65, "close": 18.85, "volume": 1001692 }, { "date": "02/23/15", "open": 18.8, "high": 18.89, "low": 18.11, "close": 18.21, "volume": 670087 }, { "date": "02/24/15", "open": 18.46, "high": 19, "low": 18.27, "close": 18.83, "volume": 759263 }, { "date": "02/25/15", "open": 18.83, "high": 19.48, "low": 18.47, "close": 18.67, "volume": 915580 }, { "date": "02/26/15", "open": 18.64, "high": 19.2, "low": 18.64, "close": 18.94, "volume": 461283 }, { "date": "02/27/15", "open": 18.8, "high": 19.12, "low": 18.55, "close": 18.66, "volume": 617199 }, { "date": "03/02/15", "open": 18.66, "high": 19.09, "low": 18.65, "close": 18.79, "volume": 519605 }, { "date": "03/03/15", "open": 18.79, "high": 19.21, "low": 18.45, "close": 18.59, "volume": 832415 }, { "date": "03/04/15", "open": 18.64, "high": 19.05, "low": 18.32, "close": 19, "volume": 539688 }, { "date": "03/05/15", "open": 19.2, "high": 19.2, "low": 18.8, "close": 19.14, "volume": 486149 }, { "date": "03/06/15", "open": 19.03, "high": 19.1, "low": 18.7, "close": 18.91, "volume": 685659 }, { "date": "03/09/15", "open": 18.98, "high": 20.15, "low": 18.96, "close": 19.4, "volume": 1321363 }, { "date": "03/10/15", "open": 19.3, "high": 19.8, "low": 18.85, "close": 19.64, "volume": 615743 }, { "date": "03/11/15", "open": 20.08, "high": 20.65, "low": 19.24, "close": 20.53, "volume": 2167167 }, { "date": "03/12/15", "open": 17.17, "high": 18.2, "low": 16.76, "close": 18.2, "volume": 6837638 }, { "date": "03/13/15", "open": 18.05, "high": 18.05, "low": 17.3, "close": 17.88, "volume": 1715629 }, { "date": "03/16/15", "open": 17.91, "high": 18, "low": 17.01, "close": 17.13, "volume": 1321313 }, { "date": "03/17/15", "open": 17.28, "high": 17.37, "low": 16.6, "close": 17.12, "volume": 1272242 }, { "date": "03/18/15", "open": 17.1, "high": 17.27, "low": 16.91, "close": 17.01, "volume": 530063 }, { "date": "03/19/15", "open": 17, "high": 17.28, "low": 17, "close": 17.06, "volume": 536427 }, { "date": "03/20/15", "open": 17.13, "high": 17.24, "low": 16.88, "close": 17.21, "volume": 1320237 }, { "date": "03/23/15", "open": 17.21, "high": 17.23, "low": 17.01, "close": 17.11, "volume": 509798 }, { "date": "03/24/15", "open": 17.02, "high": 17.18, "low": 16.82, "close": 17, "volume": 962149 }, { "date": "03/25/15", "open": 16.92, "high": 16.99, "low": 16.82, "close": 16.97, "volume": 565673 }, { "date": "03/26/15", "open": 16.83, "high": 17.56, "low": 16.83, "close": 17.54, "volume": 884523 }, { "date": "03/27/15", "open": 17.58, "high": 18.3, "low": 17.11, "close": 18.3, "volume": 705626 }, { "date": "03/30/15", "open": 18.5, "high": 19.4, "low": 18.4, "close": 19.05, "volume": 1151620 }, { "date": "03/31/15", "open": 19.08, "high": 20.58, "low": 18.4, "close": 19.75, "volume": 2020679 }, { "date": "04/01/15", "open": 19.69, "high": 19.69, "low": 18.55, "close": 18.65, "volume": 961078 }, { "date": "04/02/15", "open": 18.56, "high": 18.66, "low": 17.85, "close": 17.9, "volume": 884233 }, { "date": "04/06/15", "open": 17.78, "high": 17.94, "low": 17.51, "close": 17.66, "volume": 605252 }, { "date": "04/07/15", "open": 17.62, "high": 17.9, "low": 17.53, "close": 17.61, "volume": 591988 }, { "date": "04/08/15", "open": 17.64, "high": 17.85, "low": 17.32, "close": 17.36, "volume": 618855 }, { "date": "04/09/15", "open": 17.33, "high": 17.54, "low": 17.1, "close": 17.1, "volume": 761855 }, { "date": "04/10/15", "open": 17.08, "high": 17.36, "low": 17, "close": 17.05, "volume": 568373 }, { "date": "04/13/15", "open": 17.24, "high": 17.26, "low": 16.81, "close": 17.1, "volume": 667142 }, { "date": "04/14/15", "open": 17.1, "high": 17.89, "low": 17.02, "close": 17.52, "volume": 870138 }, { "date": "04/15/15", "open": 17.6, "high": 17.99, "low": 17.5, "close": 17.69, "volume": 530456 }, { "date": "04/16/15", "open": 17.95, "high": 18, "low": 17.6, "close": 17.82, "volume": 548730 }, { "date": "04/17/15", "open": 17.75, "high": 17.79, "low": 17.5, "close": 17.79, "volume": 446373 }, { "date": "04/20/15", "open": 17.63, "high": 17.98, "low": 17.52, "close": 17.93, "volume": 487017 }, { "date": "04/21/15", "open": 17.96, "high": 17.98, "low": 17.71, "close": 17.92, "volume": 320302 }, { "date": "04/22/15", "open": 17.88, "high": 18.33, "low": 17.57, "close": 18.29, "volume": 644812 }, { "date": "04/23/15", "open": 18.29, "high": 18.61, "low": 18.18, "close": 18.28, "volume": 563879 }, { "date": "04/24/15", "open": 18.5, "high": 18.5, "low": 17.61, "close": 17.75, "volume": 650762 }, { "date": "04/27/15", "open": 17.97, "high": 18.05, "low": 17.45, "close": 17.57, "volume": 437294 }, { "date": "04/28/15", "open": 17.65, "high": 17.79, "low": 17.39, "close": 17.5, "volume": 224519 }, { "date": "04/29/15", "open": 17.68, "high": 17.68, "low": 17.1, "close": 17.21, "volume": 495706 }, { "date": "04/30/15", "open": 17.22, "high": 17.3, "low": 17, "close": 17.11, "volume": 391040 }, { "date": "05/01/15", "open": 17.11, "high": 17.55, "low": 16.85, "close": 17.5, "volume": 563075 }, { "date": "05/04/15", "open": 17.56, "high": 17.85, "low": 17.3, "close": 17.4, "volume": 253138 }, { "date": "05/05/15", "open": 17.68, "high": 17.68, "low": 17.09, "close": 17.43, "volume": 290935 }, { "date": "05/06/15", "open": 17.48, "high": 17.48, "low": 17, "close": 17.04, "volume": 313662 }, { "date": "05/07/15", "open": 17.05, "high": 17.19, "low": 16.92, "close": 17.04, "volume": 360284 }, { "date": "05/08/15", "open": 17.13, "high": 17.21, "low": 16.91, "close": 17.1, "volume": 297653 }, { "date": "05/11/15", "open": 17.16, "high": 17.44, "low": 17.13, "close": 17.31, "volume": 268504 }, { "date": "05/12/15", "open": 17.28, "high": 17.44, "low": 16.99, "close": 17.24, "volume": 376961 }, { "date": "05/13/15", "open": 17.24, "high": 17.3, "low": 17.06, "close": 17.2, "volume": 244617 }, { "date": "05/14/15", "open": 17.24, "high": 17.25, "low": 17.02, "close": 17.08, "volume": 252526 }, { "date": "05/15/15", "open": 17.06, "high": 17.16, "low": 16.95, "close": 16.95, "volume": 274783 }, { "date": "05/18/15", "open": 16.95, "high": 17.01, "low": 16.76, "close": 16.87, "volume": 418513 }, { "date": "05/19/15", "open": 16.93, "high": 16.94, "low": 16.6, "close": 16.83, "volume": 367660 }, { "date": "05/20/15", "open": 16.8, "high": 16.9, "low": 16.65, "close": 16.86, "volume": 297914 }, { "date": "05/21/15", "open": 16.9, "high": 17.08, "low": 16.79, "close": 16.88, "volume": 229346 }, { "date": "05/22/15", "open": 16.9, "high": 17.05, "low": 16.85, "close": 17, "volume": 253279 }, { "date": "05/26/15", "open": 17.03, "high": 17.08, "low": 16.86, "close": 17.01, "volume": 212640 }, { "date": "05/27/15", "open": 17.01, "high": 17.99, "low": 16.87, "close": 17.75, "volume": 857109 }, { "date": "05/28/15", "open": 17.77, "high": 17.77, "low": 17.44, "close": 17.62, "volume": 338482 } ]; } <template> <div class="container-fluid"> <!-- Settings --> <div class="panel-group" id="settings"> <div class="panel panel-default"> <div id="settingsBody" class="panel-collapse collapse in"> <div class="panel-body"> <!-- General--> <ul class="list-inline"> <li> <wj-menu :header="'種類'" :value="selectedFib" :itemClicked="typeClick"> <wj-menu-item :value="'arcs'">アーク</wj-menu-item> <wj-menu-item :value="'fans'">ファン</wj-menu-item> <wj-menu-item :value="'retracements'">リトレースメント</wj-menu-item> <wj-menu-item :value="'timeZones'">タイムゾーン</wj-menu-item> </wj-menu> </li> </ul> <!-- Retracements --> <ul class="list-inline" v-show="selectedFib === 'retracements'"> <li> <wj-menu :header="'トレンドの種類'" :value="properties.retracements.uptrend" :itemClicked="uptrendChanged"> <wj-menu-item :value="true">上昇トレンド</wj-menu-item> <wj-menu-item :value="false">下降トレンド</wj-menu-item> </wj-menu> </li> <li> <wj-menu :header="'ラベルの位置'" :value="properties.retracements.labelPosition" :itemClicked="rlpChanged"> <wj-menu-item :value="'Left'">左</wj-menu-item> <wj-menu-item :value="'Center'">中央</wj-menu-item> <wj-menu-item :value="'Right'">右</wj-menu-item> </wj-menu> </li> </ul> <!-- Arcs --> <ul class="list-inline" v-show="selectedFib === 'arcs'"> <wj-menu :header="'ラベルの位置'" :value="properties.arcs.labelPosition" :itemClicked="alpChanged"> <wj-menu-item :value="'None'">なし</wj-menu-item> <wj-menu-item :value="'Top'">上</wj-menu-item> <wj-menu-item :value="'Center'">中央</wj-menu-item> <wj-menu-item :value="'Bottom'">下</wj-menu-item> </wj-menu> </ul> <ul class="list-inline" v-show="selectedFib === 'arcs'"> <li> <label>Xの開始位置</label> <wj-input-number :value="properties.arcs.start.x" :step="1" :valueChanged="asxChanged"> </wj-input-number> </li> <li> <label>Yの開始位置</label> <wj-input-number :value="properties.arcs.start.y" :step="1" :valueChanged="asyChanged"> </wj-input-number> </li> </ul> <ul class="list-inline" v-show="selectedFib === 'arcs'"> <li> <label>Xの終了位置</label> <wj-input-number :value="properties.arcs.end.x" :step="1" :valueChanged="aexChanged"> </wj-input-number> </li> <li> <label>Yの終了位置</label> <wj-input-number :value="properties.arcs.end.y" :step="1" :valueChanged="aeyChanged"> </wj-input-number> </li> </ul> <!-- Fans --> <ul class="list-inline" v-show="selectedFib === 'fans'"> <wj-menu :header="'ラベルの位置'" :value="properties.fans.labelPosition" :itemClicked="flpChanged"> <wj-menu-item :value="'None'">なし</wj-menu-item> <wj-menu-item :value="'Top'">上</wj-menu-item> <wj-menu-item :value="'Center'">中央</wj-menu-item> <wj-menu-item :value="'Bottom'">下</wj-menu-item> </wj-menu> </ul> <ul class="list-inline" v-show="selectedFib === 'fans'"> <li> <label>Xの開始位置</label> <wj-input-number :value="properties.fans.start.x" :step="1" :valueChanged="fsxChanged"> </wj-input-number> </li> <li> <label>Yの開始位置</label> <wj-input-number :value="properties.fans.start.y" :step="1" :valueChanged="fsyChanged"> </wj-input-number> </li> </ul> <ul class="list-inline" v-show="selectedFib === 'fans'"> <li> <label>Xの終了位置</label> <wj-input-number :value="properties.fans.end.x" :step="1" :valueChanged="fexChanged"> </wj-input-number> </li> <li> <label>Yの終了位置</label> <wj-input-number :value="properties.fans.end.y" :step="1" :valueChanged="feyChanged"> </wj-input-number> </li> </ul> <!-- Time Zones --> <ul class="list-inline" v-show="selectedFib === 'timeZones'"> <wj-menu :header="'ラベルの位置'" :value="properties.timeZones.labelPosition" :itemClicked="tlpChanged"> <wj-menu-item :value="'None'">なし</wj-menu-item> <wj-menu-item :value="'Left'">左</wj-menu-item> <wj-menu-item :value="'Center'">中央</wj-menu-item> <wj-menu-item :value="'Right'">右</wj-menu-item> </wj-menu> </ul> <ul class="list-inline" v-show="selectedFib === 'timeZones'"> <li> <label>Xの開始位置</label> <wj-input-number :value="properties.timeZones.start" :step="1" :valueChanged="tsxChanged"> </wj-input-number> </li> <li> <label>Xの終了位置</label> <wj-input-number :value="properties.timeZones.end" :step="1" :valueChanged="texChanged"> </wj-input-number> </li> </ul> </div> </div> </div> </div> <wj-financial-chart :itemsSource="data" bindingX="date" :symbolSize="6" :tooltipContent="tooltip" chartType="Candlestick" :palette="palette" :initialized="initializeChart"> <wj-financial-chart-series binding="high,low,open,close" name="Box Inc"> </wj-financial-chart-series> <wj-flex-chart-fibonacci binding="close" :symbolSize="1" name="リトレースメント" :style="{ fill: 'red', stroke: 'red', strokeWidth:0.5, fontSize:10 }" :labelPosition="properties.retracements.labelPosition" :uptrend="properties.retracements.uptrend" :visibility="selectedFib === 'retracements' ? 'Visible' : 'Hidden'"> </wj-flex-chart-fibonacci> <wj-flex-chart-fibonacci-arcs binding="close" name="アーク" :start="properties.arcs.start" :end="properties.arcs.end" :labelPosition="properties.arcs.labelPosition" :visibility="selectedFib === 'arcs' ? 'Visible' : 'Hidden'"> </wj-flex-chart-fibonacci-arcs> <wj-flex-chart-fibonacci-fans binding="close" name="ファン" :start="properties.fans.start" :end="properties.fans.end" :labelPosition="properties.fans.labelPosition" :visibility="selectedFib === 'fans' ? 'Visible' : 'Hidden'"> </wj-flex-chart-fibonacci-fans> <wj-flex-chart-fibonacci-time-zones binding="close" name="タイムゾーン" :startX="properties.timeZones.start" :endX="properties.timeZones.end" :labelPosition="properties.timeZones.labelPosition" :visibility="selectedFib === 'timeZones' ? 'Visible' : 'Hidden'"> </wj-flex-chart-fibonacci-time-zones> </wj-financial-chart> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import 'bootstrap.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.core'; import '@grapecity/wijmo.vue2.input'; import '@grapecity/wijmo.vue2.chart'; import '@grapecity/wijmo.vue2.chart.finance'; import '@grapecity/wijmo.vue2.chart.finance.analytics'; import { getData } from './data'; import * as wjChart from '@grapecity/wijmo.chart'; let App = Vue.extend({ name: 'app', data: function () { return { data: getData(), palette: this.getRandomPalette(), tooltip: '<b>日付:{date:m}</b><br/>' + '<table>' + '<tr><td>高値</td><td>{high:c}</td><tr/>' + '<tr><td>安値</td><td>{low:c}</td><tr/>' + '<tr><td>始値</td><td>{open:c}</td><tr/>' + '<tr><td>終値</td><td>{close:c}</td><tr/>' + '</table>', selectedFib: 'retracements', uptrend: true, properties: { retracements: { labelPosition: 'Left', labelPositionText: '左', uptrend: true, }, arcs: { labelPosition: 'Top', labelPositionText: '上', start: new wjChart.DataPoint(46, 19.75), end: new wjChart.DataPoint(54, 17.1) }, fans: { labelPosition: 'Top', labelPositionText: '上', start: new wjChart.DataPoint(10, 18.12), end: new wjChart.DataPoint(32, 20.53) }, timeZones: { labelPosition: 'Right', labelPositionText: '右', start: 0, end: 3 } } } }, methods: { initializeChart: function(flex) { this.theChart = flex; }, typeClick: function(menu) { if(menu.selectedItem != null) { this.selectedFib = menu.selectedItem.value; } }, uptrendChanged: function(menu) { if(menu.selectedItem != null) { this.properties.retracements.uptrend = menu.selectedItem.value; this.uptrend = menu.selectedItem.value; } }, rlpChanged: function(menu) { if(menu.selectedValue != null) { this.properties.retracements.labelPosition = menu.selectedValue; this.properties.retracements.labelPositionText = menu.text; } }, alpChanged: function(menu) { if(menu.selectedValue != null) { this.properties.arcs.labelPosition = menu.selectedValue; this.properties.arcs.labelPositionText = menu.text; } }, asxChanged: function(input) { this.properties.arcs.start.x = input.value; if (this.theChart) { this.theChart.invalidate(); } }, asyChanged: function(input) { this.properties.arcs.start.y = input.value; if (this.theChart) { this.theChart.invalidate(); } }, aexChanged: function(input) { this.properties.arcs.end.x = input.value; if (this.theChart) { this.theChart.invalidate(); } }, aeyChanged: function(input) { this.properties.arcs.end.y = input.value; if (this.theChart) { this.theChart.invalidate(); } }, flpChanged: function(menu) { if(menu.selectedValue != null) { this.properties.fans.labelPosition = menu.selectedValue; this.properties.fans.labelPositionText = menu.text; } }, fsxChanged: function(input) { this.properties.fans.start.x = input.value; if (this.theChart) { this.theChart.invalidate(); } }, fsyChanged: function(input) { this.properties.fans.start.y = input.value; if (this.theChart) { this.theChart.invalidate(); } }, fexChanged: function(input) { this.properties.fans.end.x = input.value; if (this.theChart) { this.theChart.invalidate(); } }, feyChanged: function(input) { this.properties.fans.end.y = input.value; if (this.theChart) { this.theChart.invalidate(); } }, tlpChanged: function(menu) { if(menu.selectedValue != null) { this.properties.timeZones.labelPosition = menu.selectedValue; this.properties.timeZones.labelPositionText = menu.text; } }, tsxChanged: function(input) { this.properties.timeZones.start = input.value; if (this.theChart) { this.theChart.invalidate(); } }, texChanged: function(input) { this.properties.timeZones.end = input.value; if (this.theChart) { this.theChart.invalidate(); } }, getRandomPalette: function() { let palettes = Object.getOwnPropertyNames(wjChart.Palettes) .filter(prop => typeof wjChart.Palettes[prop] === "object" && prop !== 'prototype'); let rand = Math.floor(Math.random() * palettes.length); // return wjChart.Palettes[palettes[rand]]; } } }) new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> body { margin-bottom: 24px; } label { margin-right: 3px; } #iChart { height: 200px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Fibonacci Tools</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"></div> </body> </html> export function getTypeData() { return [{ text: 'アーク', parm: 'arcs' }, { text: 'ファン', parm: 'fans' }, { text: 'リトレースメント', parm: 'retracements' }, { text: 'タイムゾーン', parm: 'timeZones' }]; } export function getData() { return [ { "date": "01/23/15", "open": 20.2, "high": 24.73, "low": 20.16, "close": 23.23, "volume": 42593223 }, { "date": "01/26/15", "open": 23.67, "high": 24.39, "low": 22.5, "close": 22.6, "volume": 8677164 }, { "date": "01/27/15", "open": 22, "high": 22.47, "low": 21.17, "close": 21.3, "volume": 3272512 }, { "date": "01/28/15", "open": 21.62, "high": 21.84, "low": 19.6, "close": 19.78, "volume": 5047364 }, { "date": "01/29/15", "open": 19.9, "high": 19.95, "low": 18.51, "close": 18.8, "volume": 3419482 }, { "date": "01/30/15", "open": 18.47, "high": 19.48, "low": 18.22, "close": 18.81, "volume": 2266439 }, { "date": "02/02/15", "open": 19.18, "high": 19.3, "low": 18.01, "close": 18.02, "volume": 2071168 }, { "date": "02/03/15", "open": 18.22, "high": 18.64, "low": 18.12, "close": 18.24, "volume": 1587435 }, { "date": "02/04/15", "open": 18.2, "high": 18.35, "low": 17, "close": 17.1, "volume": 2912224 }, { "date": "02/05/15", "open": 17.3, "high": 17.31, "low": 16.41, "close": 16.66, "volume": 2682187 }, { "date": "02/06/15", "open": 17.39, "high": 18.88, "low": 17.21, "close": 18.12, "volume": 3929164 }, { "date": "02/09/15", "open": 18.86, "high": 19.95, "low": 18.45, "close": 19.6, "volume": 3226650 }, { "date": "02/10/15", "open": 20.5, "high": 21, "low": 19.63, "close": 20.99, "volume": 2804409 }, { "date": "02/11/15", "open": 20.89, "high": 21, "low": 20.2, "close": 20.96, "volume": 1698365 }, { "date": "02/12/15", "open": 20.66, "high": 20.85, "low": 19.75, "close": 20.17, "volume": 1370320 }, { "date": "02/13/15", "open": 20.19, "high": 20.68, "low": 20, "close": 20.18, "volume": 711951 }, { "date": "02/17/15", "open": 19.5, "high": 20.1, "low": 18.8, "close": 19.05, "volume": 2093602 }, { "date": "02/18/15", "open": 18.31, "high": 18.5, "low": 17.96, "close": 18, "volume": 1849490 }, { "date": "02/19/15", "open": 18.33, "high": 19.25, "low": 17.91, "close": 18.96, "volume": 1311518 }, { "date": "02/20/15", "open": 18.68, "high": 19.3, "low": 18.65, "close": 18.85, "volume": 1001692 }, { "date": "02/23/15", "open": 18.8, "high": 18.89, "low": 18.11, "close": 18.21, "volume": 670087 }, { "date": "02/24/15", "open": 18.46, "high": 19, "low": 18.27, "close": 18.83, "volume": 759263 }, { "date": "02/25/15", "open": 18.83, "high": 19.48, "low": 18.47, "close": 18.67, "volume": 915580 }, { "date": "02/26/15", "open": 18.64, "high": 19.2, "low": 18.64, "close": 18.94, "volume": 461283 }, { "date": "02/27/15", "open": 18.8, "high": 19.12, "low": 18.55, "close": 18.66, "volume": 617199 }, { "date": "03/02/15", "open": 18.66, "high": 19.09, "low": 18.65, "close": 18.79, "volume": 519605 }, { "date": "03/03/15", "open": 18.79, "high": 19.21, "low": 18.45, "close": 18.59, "volume": 832415 }, { "date": "03/04/15", "open": 18.64, "high": 19.05, "low": 18.32, "close": 19, "volume": 539688 }, { "date": "03/05/15", "open": 19.2, "high": 19.2, "low": 18.8, "close": 19.14, "volume": 486149 }, { "date": "03/06/15", "open": 19.03, "high": 19.1, "low": 18.7, "close": 18.91, "volume": 685659 }, { "date": "03/09/15", "open": 18.98, "high": 20.15, "low": 18.96, "close": 19.4, "volume": 1321363 }, { "date": "03/10/15", "open": 19.3, "high": 19.8, "low": 18.85, "close": 19.64, "volume": 615743 }, { "date": "03/11/15", "open": 20.08, "high": 20.65, "low": 19.24, "close": 20.53, "volume": 2167167 }, { "date": "03/12/15", "open": 17.17, "high": 18.2, "low": 16.76, "close": 18.2, "volume": 6837638 }, { "date": "03/13/15", "open": 18.05, "high": 18.05, "low": 17.3, "close": 17.88, "volume": 1715629 }, { "date": "03/16/15", "open": 17.91, "high": 18, "low": 17.01, "close": 17.13, "volume": 1321313 }, { "date": "03/17/15", "open": 17.28, "high": 17.37, "low": 16.6, "close": 17.12, "volume": 1272242 }, { "date": "03/18/15", "open": 17.1, "high": 17.27, "low": 16.91, "close": 17.01, "volume": 530063 }, { "date": "03/19/15", "open": 17, "high": 17.28, "low": 17, "close": 17.06, "volume": 536427 }, { "date": "03/20/15", "open": 17.13, "high": 17.24, "low": 16.88, "close": 17.21, "volume": 1320237 }, { "date": "03/23/15", "open": 17.21, "high": 17.23, "low": 17.01, "close": 17.11, "volume": 509798 }, { "date": "03/24/15", "open": 17.02, "high": 17.18, "low": 16.82, "close": 17, "volume": 962149 }, { "date": "03/25/15", "open": 16.92, "high": 16.99, "low": 16.82, "close": 16.97, "volume": 565673 }, { "date": "03/26/15", "open": 16.83, "high": 17.56, "low": 16.83, "close": 17.54, "volume": 884523 }, { "date": "03/27/15", "open": 17.58, "high": 18.3, "low": 17.11, "close": 18.3, "volume": 705626 }, { "date": "03/30/15", "open": 18.5, "high": 19.4, "low": 18.4, "close": 19.05, "volume": 1151620 }, { "date": "03/31/15", "open": 19.08, "high": 20.58, "low": 18.4, "close": 19.75, "volume": 2020679 }, { "date": "04/01/15", "open": 19.69, "high": 19.69, "low": 18.55, "close": 18.65, "volume": 961078 }, { "date": "04/02/15", "open": 18.56, "high": 18.66, "low": 17.85, "close": 17.9, "volume": 884233 }, { "date": "04/06/15", "open": 17.78, "high": 17.94, "low": 17.51, "close": 17.66, "volume": 605252 }, { "date": "04/07/15", "open": 17.62, "high": 17.9, "low": 17.53, "close": 17.61, "volume": 591988 }, { "date": "04/08/15", "open": 17.64, "high": 17.85, "low": 17.32, "close": 17.36, "volume": 618855 }, { "date": "04/09/15", "open": 17.33, "high": 17.54, "low": 17.1, "close": 17.1, "volume": 761855 }, { "date": "04/10/15", "open": 17.08, "high": 17.36, "low": 17, "close": 17.05, "volume": 568373 }, { "date": "04/13/15", "open": 17.24, "high": 17.26, "low": 16.81, "close": 17.1, "volume": 667142 }, { "date": "04/14/15", "open": 17.1, "high": 17.89, "low": 17.02, "close": 17.52, "volume": 870138 }, { "date": "04/15/15", "open": 17.6, "high": 17.99, "low": 17.5, "close": 17.69, "volume": 530456 }, { "date": "04/16/15", "open": 17.95, "high": 18, "low": 17.6, "close": 17.82, "volume": 548730 }, { "date": "04/17/15", "open": 17.75, "high": 17.79, "low": 17.5, "close": 17.79, "volume": 446373 }, { "date": "04/20/15", "open": 17.63, "high": 17.98, "low": 17.52, "close": 17.93, "volume": 487017 }, { "date": "04/21/15", "open": 17.96, "high": 17.98, "low": 17.71, "close": 17.92, "volume": 320302 }, { "date": "04/22/15", "open": 17.88, "high": 18.33, "low": 17.57, "close": 18.29, "volume": 644812 }, { "date": "04/23/15", "open": 18.29, "high": 18.61, "low": 18.18, "close": 18.28, "volume": 563879 }, { "date": "04/24/15", "open": 18.5, "high": 18.5, "low": 17.61, "close": 17.75, "volume": 650762 }, { "date": "04/27/15", "open": 17.97, "high": 18.05, "low": 17.45, "close": 17.57, "volume": 437294 }, { "date": "04/28/15", "open": 17.65, "high": 17.79, "low": 17.39, "close": 17.5, "volume": 224519 }, { "date": "04/29/15", "open": 17.68, "high": 17.68, "low": 17.1, "close": 17.21, "volume": 495706 }, { "date": "04/30/15", "open": 17.22, "high": 17.3, "low": 17, "close": 17.11, "volume": 391040 }, { "date": "05/01/15", "open": 17.11, "high": 17.55, "low": 16.85, "close": 17.5, "volume": 563075 }, { "date": "05/04/15", "open": 17.56, "high": 17.85, "low": 17.3, "close": 17.4, "volume": 253138 }, { "date": "05/05/15", "open": 17.68, "high": 17.68, "low": 17.09, "close": 17.43, "volume": 290935 }, { "date": "05/06/15", "open": 17.48, "high": 17.48, "low": 17, "close": 17.04, "volume": 313662 }, { "date": "05/07/15", "open": 17.05, "high": 17.19, "low": 16.92, "close": 17.04, "volume": 360284 }, { "date": "05/08/15", "open": 17.13, "high": 17.21, "low": 16.91, "close": 17.1, "volume": 297653 }, { "date": "05/11/15", "open": 17.16, "high": 17.44, "low": 17.13, "close": 17.31, "volume": 268504 }, { "date": "05/12/15", "open": 17.28, "high": 17.44, "low": 16.99, "close": 17.24, "volume": 376961 }, { "date": "05/13/15", "open": 17.24, "high": 17.3, "low": 17.06, "close": 17.2, "volume": 244617 }, { "date": "05/14/15", "open": 17.24, "high": 17.25, "low": 17.02, "close": 17.08, "volume": 252526 }, { "date": "05/15/15", "open": 17.06, "high": 17.16, "low": 16.95, "close": 16.95, "volume": 274783 }, { "date": "05/18/15", "open": 16.95, "high": 17.01, "low": 16.76, "close": 16.87, "volume": 418513 }, { "date": "05/19/15", "open": 16.93, "high": 16.94, "low": 16.6, "close": 16.83, "volume": 367660 }, { "date": "05/20/15", "open": 16.8, "high": 16.9, "low": 16.65, "close": 16.86, "volume": 297914 }, { "date": "05/21/15", "open": 16.9, "high": 17.08, "low": 16.79, "close": 16.88, "volume": 229346 }, { "date": "05/22/15", "open": 16.9, "high": 17.05, "low": 16.85, "close": 17, "volume": 253279 }, { "date": "05/26/15", "open": 17.03, "high": 17.08, "low": 16.86, "close": 17.01, "volume": 212640 }, { "date": "05/27/15", "open": 17.01, "high": 17.99, "low": 16.87, "close": 17.75, "volume": 857109 }, { "date": "05/28/15", "open": 17.77, "high": 17.77, "low": 17.44, "close": 17.62, "volume": 338482 } ]; }