チャート:テクニカル指標

サンプルではドロップダウンですべてのテクニカル指標を選択できます(ストキャスティクス、移動平均収束拡散、ウィリアムズ%R、相対力指数、アベレージトゥルーレンジ、商品チャネル指数)。

テクニカル指標は、元のデータセットに1つ以上の数式を適用して計算することにより派生したデータのセットです。テクニカル指標は、一般に資産の市場の方向を予測するために使用され、通常は元のデータとY軸のスケールが異なるため、別にプロットされます。

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, getIndicatorList } 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', series: [ { binding: 'close', name: 'Box Inc' } ], legend: { position: 'Top' }, 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>' }, axisX: { labelAngle: 0 } }); theChart.palette = getRandomPalette(); // let iChart = new fChart.FinancialChart('#iChart', { itemsSource: data, bindingX: 'date', legend: { position: 'Bottom' }, 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>' }, rendered: () => { iChart.axisX.min = theChart.axisX.actualMin; iChart.axisX.max = theChart.axisX.actualMax; }, axisX: { labelAngle: 0 } }); iChart.beginUpdate(); iChart.palette = getRandomPalette(); let s = iChart.series; //ATR let atr = new fChartAnalytics.ATR({ binding: 'high,low,open,close', name: 'アベレージトゥルーレンジ', period: 14, }); s.push(atr); //RSI let rsi = new fChartAnalytics.RSI({ binding: 'close', name: '相対力指数', period: 14, visibility: 'Hidden' }); s.push(rsi); //cci let cci = new fChartAnalytics.CCI({ binding: 'high,low,open,close', name: '商品チャネル指数', period: 20, visibility: 'Hidden' }); s.push(cci); //william r let williamsR = new fChartAnalytics.WilliamsR({ binding: 'high,low,open,close', name: 'ウィリアムズ%R', period: 14, visibility: 'Hidden' }); s.push(williamsR); //macd let macd = new fChartAnalytics.Macd({ binding: 'close', name: '移動平均収束拡散,シグナル', styles: { macdLine: { stroke: '#bfa554' }, signalLine: { stroke: '#bf8c54' } }, fastPeriod: 12, slowPeriod: 26, smoothingPeriod: 9, visibility: 'Hidden' }); s.push(macd); //macd histogram let histogram = new fChartAnalytics.MacdHistogram({ binding: 'close', name: 'ヒストグラム', fastPeriod: 12, slowPeriod: 26, smoothingPeriod: 9, visibility: 'Hidden' }); s.push(histogram); let stochastic = new fChartAnalytics.Stochastic({ binding: 'high,low,open,close', name: '%K,%D', kPeriod: 14, dPeriod: 3, smoothingPeriod: 1, styles: { kLine: { stroke: '#eddd46' }, dLine: { stroke: '#edb747' } }, visibility: 'Hidden' }); s.push(stochastic); iChart.endUpdate(); //indicators selector let arr = [atr, rsi, cci, williamsR, [macd, histogram], stochastic]; let selectorArr = ['.ul-atr', '.ul-rsi', '.ul-cci', '.ul-williams-r', '.ul-macd', '.ul-stochastic']; let indicatorsList = getIndicatorList(); let indicators = new input.ComboBox('#indicators', { itemsSource: indicatorsList, selectedValuePath: 'abbreviation', displayMemberPath: 'name', selectedIndexChanged: reset }); reset(indicators); function reset(combo) { let idx = combo.selectedIndex; // arr.forEach(s => { if (s instanceof chart.SeriesBase) { s.visibility = chart.SeriesVisibility.Hidden; } else { s[0].visibility = chart.SeriesVisibility.Hidden; s[1].visibility = chart.SeriesVisibility.Hidden; } }); let series = arr[idx]; if (series instanceof chart.SeriesBase) { series.visibility = chart.SeriesVisibility.Visible; } else { series[0].visibility = chart.SeriesVisibility.Visible; series[1].visibility = chart.SeriesVisibility.Visible; } let props = document.querySelectorAll('.ul-properties'); for (let i = 0, len = props.length; i < len; i++) { let ele = props[i]; ele.style.display = 'none'; } let showEle = document.querySelector(selectorArr[idx]); showEle.style.display = ''; } //ATR properties let inputATRPeriod = new input.InputNumber('#atrPeriod', { value: 14, min: 2, max: data.length > 0 ? data.length - 1 : 14, step: 1, format: 'n0', valueChanged: s => { if (s == null || s.value < s.min || s.value > s.max) { return; } atr.period = s.value; } }); //RSI properties let inputRSIPeriod = new input.InputNumber('#rsiPeriod', { value: 14, min: 2, max: data.length > 0 ? data.length - 1 : 14, step: 1, format: 'n0', valueChanged: s => { if (s == null || s.value < s.min || s.value > s.max) { return; } rsi.period = s.value; } }); //CCI properties let inputCCIPeriod = new input.InputNumber('#cciPeriod', { value: 20, min: 2, max: data.length > 0 ? data.length - 1 : 20, step: 1, format: 'n0', valueChanged: s => { if (s == null || s.value < s.min || s.value > s.max) { return; } cci.period = s.value; } }); //Williams %R properties let inputWilliamsRPeriod = new input.InputNumber('#williamsRPeriod', { value: 14, min: 2, max: data.length > 0 ? data.length - 1 : 14, step: 1, format: 'n0', valueChanged: s => { if (s == null || s.value < s.min || s.value > s.max) { return; } williamsR.period = s.value; } }); //MACD & MACD Histogram properties let inputMacdFastPeriod = new input.InputNumber('#macdFastPeriod', { value: 12, min: 2, max: data.length > 0 ? data.length - 1 : 12, step: 1, format: 'n0', valueChanged: s => { if (s == null || s.value < s.min || s.value > s.max) { return; } macd.fastPeriod = s.value; histogram.fastPeriod = s.value; } }); let inputMacdSlowPeriod = new input.InputNumber('#macdSlowPeriod', { value: 26, min: 2, max: data.length > 0 ? data.length - 1 : 26, step: 1, format: 'n0', valueChanged: s => { if (s == null || s.value < s.min || s.value > s.max) { return; } macd.slowPeriod = s.value; histogram.slowPeriod = s.value; } }); let inputMacdSmoothingPeriod = new input.InputNumber('#macdSmoothingPeriod', { value: 9, min: 2, max: data.length > 0 ? data.length - 1 : 9, step: 1, format: 'n0', valueChanged: s => { if (s == null || s.value < s.min || s.value > s.max) { return; } macd.smoothingPeriod = s.value; histogram.smoothingPeriod = s.value; } }); //Stochastic properties let inputStochasticKPeriod = new input.InputNumber('#stochasticKPeriod', { value: 14, min: 2, max: data.length > 0 ? data.length - 1 : 14, step: 1, format: 'n0', valueChanged: s => { if (s == null || s.value < s.min || s.value > s.max) { return; } stochastic.kPeriod = s.value; } }); let inputStochasticDPeriod = new input.InputNumber('#stochasticDPeriod', { value: 3, min: 2, max: data.length > 0 ? data.length - 1 : 3, step: 1, format: 'n0', valueChanged: s => { if (s == null || s.value < s.min || s.value > s.max) { return; } stochastic.dPeriod = s.value; } }); let inputStochasticSmoothingPeriod = new input.InputNumber('#stochasticSmoothingPeriod', { value: 1, min: 2, max: data.length > 0 ? data.length - 1 : 1, step: 1, format: 'n0', valueChanged: s => { if (s == null || s.value < s.min || s.value > s.max) { return; } stochastic.smoothingPeriod = s.value; } }); } // 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]]; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Financial Indicators</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"> <!-- Indicator Selector --> <ul class="list-inline ul-indicators"> <li> <label>テクニカル指標の種類</label> <input id="indicators" /> </li> </ul> <!-- ATR Properties --> <ul class="list-inline ul-properties ul-atr"> <li> <label>期間</label> <input id="atrPeriod" /> </li> </ul> <!-- RSI Properties --> <ul class="list-inline ul-properties ul-rsi"> <li> <label>期間</label> <input id="rsiPeriod" /> </li> </ul> <!-- CCI Properties --> <ul class="list-inline ul-properties ul-cci"> <li> <label>期間</label> <input id="cciPeriod" /> </li> </ul> <!-- Williams %R Properties --> <ul class="list-inline ul-properties ul-williams-r"> <li> <label>期間</label> <input id="williamsRPeriod" /> </li> </ul> <!-- MACD & MACD Histogram Properties --> <ul class="list-inline ul-properties ul-macd"> <li> <label>高速期間</label> <input id="macdFastPeriod" /> </li> <li> <label>低速期間</label> <input id="macdSlowPeriod" /> </li> <li> <label>シグナルスムージング期間</label> <input id="macdSmoothingPeriod" /> </li> </ul> <!-- Fast Stochastic Properties --> <ul class="list-inline ul-properties ul-stochastic"> <li> <label>K期間</label> <input id="stochasticKPeriod" /> </li> <li> <label>D期間</label> <input id="stochasticDPeriod" /> </li> <li> <label>スムージング期間</label> <input id="stochasticSmoothingPeriod" /> </li> </ul> </div> </div> </div> </div> <div id="theChart"></div> <div id="iChart"></div> </div> </body> </html> // some stock data from Google Finance export function getIndicatorList() { return [ { name: 'アベレージトゥルーレンジ', abbreviation: 'atr' }, { name: '相対力指数', abbreviation: 'rsi' }, { name: '商品チャネル指数', abbreviation: 'cci' }, { name: 'ウィリアムズ%R', abbreviation: 'williamsR' }, { name: '移動平均収束拡散', abbreviation: 'macd' }, { name: 'ストキャスティクス', abbreviation: 'stoch' } ]; } 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; } .wj-combobox { width: 250px; } 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 { WjChartFinanceAnalyticsModule } from '@grapecity/wijmo.angular2.chart.finance.analytics'; import { DataService } from './app.data'; import * as wjCore from '@grapecity/wijmo'; import * as wjInput from '@grapecity/wijmo.input'; import * as wjChart from '@grapecity/wijmo.chart'; import * as wjFinancialChart from '@grapecity/wijmo.chart.finance'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; palette: any; tooltip: string; properties: any; indicators: any; selectedIndicator: string; @ViewChild('theChart') theChart: wjFinancialChart.FinancialChart; @ViewChild('indicatorChart') iChart: wjFinancialChart.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.indicators = dataService.getIndicatorList(); this.selectedIndicator = this.indicators[0].abbreviation; this.properties = { // ATR, CCI, RSI, Williams %R atrPeriod: 14, cciPeriod: 20, rsiPeriod: 14, williamsRPeriod: 14, // MACD fastPeriod: 12, slowPeriod: 26, smoothingPeriod: 9, macdStyles: { // named styles macdLine: { stroke: '#bfa554' }, signalLine: { stroke: '#bf8c54' } }, // Fast Stochastic stochKPeriod: 14, stochDPeriod: 3, stochSmoothingPeriod: 1, stochStyles: { // named styles kLine: { stroke: '#eddd46' }, dLine: { stroke: '#edb747' } } }; } // chartRendered() { this.iChart.axisX.min = this.theChart.axisX.actualMin; this.iChart.axisX.max = this.theChart.axisX.actualMax; } // fastSlowPeriodChanged() { var data = this.data, props = this.properties, len, smoothing; if (data.length <= 0) { return; } len = data.length; smoothing = props.smoothingPeriod; props.fastPeriod = wjCore.clamp(props.fastPeriod, 2, Math.abs(len - smoothing)); props.slowPeriod = wjCore.clamp(props.slowPeriod, 2, Math.abs(len - smoothing)); } // smoothingPeriodChanged() { var data = this.data, props = this.properties, len, max; if (data.length <= 0) { return; } len = data.length; max = Math.max(props.fastPeriod, props.slowPeriod); props.smoothingPeriod = wjCore.clamp(props.smoothingPeriod, 2, Math.abs(len - max)); } // stochKPeriodChanged() { var data = this.data, props = this.properties, len, max; if (data.length <= 0) { return; } len = data.length; max = Math.abs(len - props.stochDPeriod); if (props.stochSmoothingPeriod > 1) { max -= props.stochSmoothingPeriod; } props.stochKPeriod = wjCore.clamp(props.stochKPeriod, 2, max); } // stochDPeriodChanged() { var data = this.data, props = this.properties, len, max; if (data.length <= 0) { return; } len = data.length; max = Math.abs(len - props.stochKPeriod); if (props.stochSmoothingPeriod > 1) { max -= props.stochSmoothingPeriod; } props.stochDPeriod = wjCore.clamp(props.stochDPeriod, 2, max); } // stochSmoothingPeriodChanged(input: wjInput.InputNumber) { var data = this.data, props = this.properties, len, max; if (data.length <= 0 || input.value <= 1) { return; } len = data.length; max = Math.abs(len - props.stochKPeriod - props.stochDPeriod); max = max || 1; props.stochSmoothingPeriod = wjCore.clamp(input.value, 1, max); } // atrPeriodChanged(input: wjInput.InputNumber) { if (input.value < input.min || input.value > input.max) { return; } this.properties.atrPeriod = input.value; } // rsiPeriodChanged(input: wjInput.InputNumber) { if (input.value < input.min || input.value > input.max) { return; } this.properties.rsiPeriod = input.value; } // cciPeriodChanged(input: wjInput.InputNumber) { if (input.value < input.min || input.value > input.max) { return; } this.properties.cciPeriod = input.value; } // wrPeriodChanged(input: wjInput.InputNumber) { if (input.value < input.min || input.value > input.max) { return; } this.properties.williamsRPeriod = input.value; } // 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, 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 Financial Indicators</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"> <div id="settingsBody" class="panel-collapse collapse in"> <div class="panel-body"> <!-- Indicator Selector --> <ul class="list-inline"> <li> <label>テクニカル指標の種類</label> <wj-combo-box [itemsSource]="indicators" selectedValuePath="abbreviation" displayMemberPath="name" [(selectedValue)]="selectedIndicator"> </wj-combo-box> </li> </ul> <!-- ATR Properties --> <ul class="list-inline" *ngIf="selectedIndicator === 'atr'"> <li> <label>期間</label> <wj-input-number #iptAtrPeriod (valueChanged)="atrPeriodChanged(iptAtrPeriod)" [value]="14" [min]="2" [max]="data.length > 0 ? data.length - 1 : properties.atrPeriod" [step]="1" format="n0"> </wj-input-number> </li> </ul> <!-- RSI Properties --> <ul class="list-inline" *ngIf="selectedIndicator === 'rsi'"> <li> <label>期間</label> <wj-input-number #iptRsiPeriod (valueChanged)="rsiPeriodChanged(iptRsiPeriod)" [value]="14" [min]="2" [max]="data.length > 0 ? data.length - 1 : properties.rsiPeriod" [step]="1" format="n0"> </wj-input-number> </li> </ul> <!-- CCI Properties --> <ul class="list-inline" *ngIf="selectedIndicator === 'cci'"> <li> <label>期間</label> <wj-input-number #iptCciPeriod (valueChanged)="cciPeriodChanged(iptCciPeriod)" [value]="20" [min]="2" [max]="data.length > 0 ? data.length - 1 : properties.cciPeriod" [step]="1" format="n0"> </wj-input-number> </li> </ul> <!-- Williams %R Properties --> <ul class="list-inline" *ngIf="selectedIndicator === 'williamsR'"> <li> <label>期間</label> <wj-input-number #iptWRPeriod (valueChanged)="wrPeriodChanged(iptWRPeriod)" [value]="14" [min]="2" [max]="data.length > 0 ? data.length - 1 : properties.williamsRPeriod" [step]="1" format="n0"> </wj-input-number> </li> </ul> <!-- MACD & MACD Histogram Properties --> <ul class="list-inline" *ngIf="selectedIndicator === 'macd'"> <li> <label>高速期間</label> <wj-input-number #fastPeriod [(value)]="properties.fastPeriod" [min]="2" [max]="data.length > 0 ? data.length - 1 : properties.fastPeriod" [step]="1" format="n0" (valueChanged)="fastSlowPeriodChanged()"> </wj-input-number> </li> <li> <label>低速期間</label> <wj-input-number [(value)]="properties.slowPeriod" [min]="2" [max]="data.length > 0 ? data.length - 1 : properties.slowPeriod" [step]="1" format="n0" (valueChanged)="fastSlowPeriodChanged()"> </wj-input-number> </li> <li> <label>シグナルスムージング期間</label> <wj-input-number [(value)]="properties.smoothingPeriod" [min]="2" [max]="data.length > 0 ? data.length - 1 : properties.smoothingPeriod" [step]="1" format="n0" (valueChanged)="smoothingPeriodChanged()"> </wj-input-number> </li> </ul> <!-- Fast Stochastic Properties --> <ul class="list-inline" *ngIf="selectedIndicator === 'stoch'"> <li> <label>K期間</label> <wj-input-number [(value)]="properties.stochKPeriod" [min]="2" [max]="data.length > 0 ? data.length - 1 : properties.stochKPeriod" [step]="1" format="n0" (valueChanged)="stochKPeriodChanged()"> </wj-input-number> </li> <li> <label>D期間</label> <wj-input-number [(value)]="properties.stochDPeriod" [min]="2" [max]="data.length > 0 ? data.length - 1 : properties.stochDPeriod" [step]="1" format="n0" (valueChanged)="stochDPeriodChanged()"> </wj-input-number> </li> <li> <label>スムージング期間</label> <wj-input-number #stochSmoothingInput [value]="1" [min]="1" [max]="data.length > 0 ? data.length - 1 : properties.stochSmoothingPeriod" [step]="1" format="n0" (valueChanged)="stochSmoothingPeriodChanged(stochSmoothingInput)"> </wj-input-number> </li> </ul> </div> </div> <!-- FinancialChart --> <wj-financial-chart #theChart [itemsSource]="data" bindingX="date" [palette]="palette" [tooltipContent]="tooltip"> <wj-financial-chart-series binding="close" name="Box Inc"></wj-financial-chart-series> <wj-flex-chart-legend position="Top"></wj-flex-chart-legend> <wj-flex-chart-axis wjProperty="axisX" [labelAngle]="0" [axisLine]="true"></wj-flex-chart-axis> </wj-financial-chart> <!-- Indicators Chart --> <wj-financial-chart #indicatorChart [itemsSource]="data" style="height: 200px" bindingX="date" [palette]="palette" [tooltipContent]="tooltip" rendered="chartRendered()"> <wj-flex-chart-legend position="Bottom"></wj-flex-chart-legend> <wj-flex-chart-axis wjProperty="axisX" [labelAngle]="0" [axisLine]="true"></wj-flex-chart-axis> <wj-flex-chart-atr binding="high,low,open,close" name="アベレージトゥルーレンジ" [period]="properties.atrPeriod" [visibility]="selectedIndicator === 'atr' ? 'Visible' : 'Hidden'"> </wj-flex-chart-atr> <wj-flex-chart-rsi binding="close" name="相対力指数" [period]="properties.rsiPeriod" [visibility]="selectedIndicator === 'rsi' ? 'Visible' : 'Hidden'"> </wj-flex-chart-rsi> <wj-flex-chart-cci binding="high,low,open,close" name="商品チャネル指数" [period]="properties.cciPeriod" [visibility]="selectedIndicator === 'cci' ? 'Visible' : 'Hidden'"> </wj-flex-chart-cci> <wj-flex-chart-williams-r binding="high,low,open,close" name="ウィリアムズ%R" [period]="properties.williamsRPeriod" [visibility]="selectedIndicator === 'williamsR' ? 'Visible' : 'Hidden'"> </wj-flex-chart-williams-r> <wj-flex-chart-macd binding="close" name="移動平均収束拡散,シグナル" [styles]="properties.macdStyles" [fastPeriod]="properties.fastPeriod" [slowPeriod]="properties.slowPeriod" [smoothingPeriod]="properties.smoothingPeriod" [visibility]="selectedIndicator === 'macd' ? 'Visible' : 'Hidden'"> </wj-flex-chart-macd> <wj-flex-chart-macd-histogram binding="close" name="ヒストグラム" [fastPeriod]="properties.fastPeriod" [slowPeriod]="properties.slowPeriod" [smoothingPeriod]="properties.smoothingPeriod" [visibility]="selectedIndicator === 'macd' ? 'Visible' : 'Hidden'"> </wj-flex-chart-macd-histogram> <wj-flex-chart-stochastic binding="high,low,open,close" name="%K,%D" [kPeriod]="properties.stochKPeriod" [dPeriod]="properties.stochDPeriod" [smoothingPeriod]="properties.stochSmoothingPeriod" [visibility]="selectedIndicator === 'stoch' ? 'Visible' : 'Hidden'" [styles]="properties.stochStyles"> </wj-flex-chart-stochastic> </wj-financial-chart> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getIndicatorList() { return [ { name: 'アベレージトゥルーレンジ', abbreviation: 'atr' }, { name: '相対力指数', abbreviation: 'rsi' }, { name: '商品チャネル指数', abbreviation: 'cci' }, { name: 'ウィリアムズ%R', abbreviation: 'williamsR' }, { name: '移動平均収束拡散', abbreviation: 'macd' }, { name: 'ストキャスティクス', abbreviation: 'stoch' } ]; } // 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; } .wj-combobox { width: 250px; } body { margin-bottom: 24pt; } 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 wjCore from '@grapecity/wijmo'; import * as chart from '@grapecity/wijmo.chart'; import * as wjChart from '@grapecity/wijmo.react.chart'; import * as wjFinance from '@grapecity/wijmo.react.chart.finance'; import * as wjFinanceAnalytics from '@grapecity/wijmo.react.chart.finance.analytics'; import * as wjInput from '@grapecity/wijmo.react.input'; import { getData, getIndicatorList } from './data'; class App extends React.Component { constructor(props) { super(props); this.initializeChart = (flex) => { flex.tooltip.content = this.state.tooltip; this.theChart = flex; }; this.initializeIChart = (flex) => { flex.tooltip.content = this.state.tooltip; this.iChart = flex; }; this.typeChanged = (combo) => { this.setState({ selectedIndicator: combo.selectedValue }); }; this.chartRendered = () => { this.iChart.axisX.min = this.theChart.axisX.actualMin; this.iChart.axisX.max = this.theChart.axisX.actualMax; }; this.fastPeriodChanged = (input) => { var data = this.state.data, props = this.state.properties, len, smoothing; if (data.length <= 0) { return; } len = data.length; smoothing = props.smoothingPeriod; props.fastPeriod = wjCore.clamp(input.value, 2, Math.abs(len - smoothing)); this.setState({ properties: props }); }; this.slowPeriodChanged = (input) => { var data = this.state.data, props = this.state.properties, len, smoothing; if (data.length <= 0) { return; } len = data.length; smoothing = props.smoothingPeriod; props.slowPeriod = wjCore.clamp(input.value, 2, Math.abs(len - smoothing)); this.setState({ properties: props }); }; this.smoothingPeriodChanged = (input) => { var data = this.state.data, props = this.state.properties, len, max; if (data.length <= 0) { return; } len = data.length; max = Math.max(props.fastPeriod, props.slowPeriod); props.smoothingPeriod = wjCore.clamp(input.value, 2, Math.abs(len - max)); this.setState({ properties: props }); }; this.stochKPeriodChanged = (input) => { var data = this.state.data, props = this.state.properties, len, max; if (data.length <= 0) { return; } len = data.length; max = Math.abs(len - props.stochDPeriod); if (props.stochSmoothingPeriod > 1) { max -= props.stochSmoothingPeriod; } props.stochKPeriod = wjCore.clamp(input.value, 2, max); this.setState({ properties: props }); }; this.stochDPeriodChanged = (input) => { var data = this.state.data, props = this.state.properties, len, max; if (data.length <= 0) { return; } len = data.length; max = Math.abs(len - props.stochKPeriod); if (props.stochSmoothingPeriod > 1) { max -= props.stochSmoothingPeriod; } props.stochDPeriod = wjCore.clamp(input.value, 2, max); this.setState({ properties: props }); }; this.stochSmoothingPeriodChanged = (input) => { var data = this.state.data, props = this.state.properties, len, max; if (data.length <= 0 || input.value <= 1) { return; } len = data.length; max = Math.abs(len - props.stochKPeriod - props.stochDPeriod); max = max || 1; props.stochSmoothingPeriod = wjCore.clamp(input.value, 1, max); this.setState({ properties: props }); }; this.atrPeriodChanged = (input) => { if (input.value < input.min || input.value > input.max) { return; } let properties = this.state.properties; properties.atrPeriod = input.value; this.setState({ properties: properties }); }; this.rsiPeriodChanged = (input) => { if (input.value < input.min || input.value > input.max) { return; } let properties = this.state.properties; properties.rsiPeriod = input.value; this.setState({ properties: properties }); }; this.cciPeriodChanged = (input) => { if (input.value < input.min || input.value > input.max) { return; } let properties = this.state.properties; properties.cciPeriod = input.value; this.setState({ properties: properties }); }; this.wrPeriodChanged = (input) => { if (input.value < input.min || input.value > input.max) { return; } let properties = this.state.properties; properties.williamsRPeriod = input.value; this.setState({ properties: properties }); }; this.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]]; }; 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>', indicators: getIndicatorList(), selectedIndicator: 'atr', properties: { // ATR, CCI, RSI, Williams %R atrPeriod: 14, cciPeriod: 20, rsiPeriod: 14, williamsRPeriod: 14, // MACD fastPeriod: 12, slowPeriod: 26, smoothingPeriod: 9, macdStyles: { macdLine: { stroke: '#bfa554' }, signalLine: { stroke: '#bf8c54' } }, // Fast Stochastic stochKPeriod: 14, stochDPeriod: 3, stochSmoothingPeriod: 1, stochStyles: { kLine: { stroke: '#eddd46' }, dLine: { stroke: '#edb747' } } } }; } ; render() { return <div className="container-fluid"> <div id="settingsBody" className="panel-collapse collapse in"> <div className="panel-body"> <ul className="list-inline"> <li> <label>テクニカル指標の種類</label> <wjInput.ComboBox itemsSource={this.state.indicators} textChanged={this.typeChanged} selectedValuePath="abbreviation" displayMemberPath="name" selectedValue={this.state.selectedIndicator}> </wjInput.ComboBox> </li> </ul> {this.state.selectedIndicator === 'atr' ? <ul className="list-inline"> <li> <label>期間</label> <wjInput.InputNumber valueChanged={this.atrPeriodChanged} value={this.state.properties.atrPeriod} min={2} max={this.state.data.length > 0 ? this.state.data.length - 1 : this.state.properties.atrPeriod} step={1} format="n0"> </wjInput.InputNumber> </li> </ul> : null} {this.state.selectedIndicator === 'rsi' ? <ul className="list-inline"> <li> <label>期間</label> <wjInput.InputNumber valueChanged={this.rsiPeriodChanged} value={this.state.properties.rsiPeriod} min={2} max={this.state.data.length > 0 ? this.state.data.length - 1 : this.state.properties.rsiPeriod} step={1} format="n0"> </wjInput.InputNumber> </li> </ul> : null} {this.state.selectedIndicator === 'cci' ? <ul className="list-inline"> <li> <label>期間</label> <wjInput.InputNumber valueChanged={this.cciPeriodChanged} value={this.state.properties.cciPeriod} min={2} max={this.state.data.length > 0 ? this.state.data.length - 1 : this.state.properties.cciPeriod} step={1} format="n0"> </wjInput.InputNumber> </li> </ul> : null} {this.state.selectedIndicator === 'williamsR' ? <ul className="list-inline"> <li> <label>期間</label> <wjInput.InputNumber valueChanged={this.wrPeriodChanged} value={this.state.properties.williamsRPeriod} min={2} max={this.state.data.length > 0 ? this.state.data.length - 1 : this.state.properties.williamsRPeriod} step={1} format="n0"> </wjInput.InputNumber> </li> </ul> : null} {this.state.selectedIndicator === 'macd' ? <ul className="list-inline"> <li> <label>高速期間</label> <wjInput.InputNumber value={this.state.properties.fastPeriod} min={2} max={this.state.data.length > 0 ? this.state.data.length - 1 : this.state.properties.fastPeriod} step={1} format="n0" valueChanged={this.fastPeriodChanged}> </wjInput.InputNumber> </li> <li> <label>低速期間</label> <wjInput.InputNumber value={this.state.properties.slowPeriod} min={2} max={this.state.data.length > 0 ? this.state.data.length - 1 : this.state.properties.slowPeriod} step={1} format="n0" valueChanged={this.slowPeriodChanged}> </wjInput.InputNumber> </li> <li> <label>シグナルスムージング期間</label> <wjInput.InputNumber value={this.state.properties.smoothingPeriod} min={2} max={this.state.data.length > 0 ? this.state.data.length - 1 : this.state.properties.smoothingPeriod} step={1} format="n0" valueChanged={this.smoothingPeriodChanged}> </wjInput.InputNumber> </li> </ul> : null} {this.state.selectedIndicator === 'stoch' ? <ul className="list-inline"> <li> <label>K期間</label> <wjInput.InputNumber value={this.state.properties.stochKPeriod} min={2} max={this.state.data.length > 0 ? this.state.data.length - 1 : this.state.properties.stochKPeriod} step={1} format="n0" valueChanged={this.stochKPeriodChanged}> </wjInput.InputNumber> </li> <li> <label>D期間</label> <wjInput.InputNumber value={this.state.properties.stochDPeriod} min={2} max={this.state.data.length > 0 ? this.state.data.length - 1 : this.state.properties.stochDPeriod} step={1} format="n0" valueChanged={this.stochDPeriodChanged}> </wjInput.InputNumber> </li> <li> <label>スムージング期間</label> <wjInput.InputNumber value={this.state.properties.stochSmoothingPeriod} min={1} max={this.state.data.length > 0 ? this.state.data.length - 1 : this.state.properties.stochSmoothingPeriod} step={1} format="n0" valueChanged={this.stochSmoothingPeriodChanged}> </wjInput.InputNumber> </li> </ul> : null} </div> </div> <wjFinance.FinancialChart itemsSource={this.state.data} bindingX="date" palette={this.state.palette} initialized={this.initializeChart}> <wjFinance.FinancialChartSeries binding="close" name="Box Inc"></wjFinance.FinancialChartSeries> <wjChart.FlexChartLegend position="Top"></wjChart.FlexChartLegend> <wjChart.FlexChartAxis wjProperty="axisX" labelAngle={0} axisLine={true}></wjChart.FlexChartAxis> </wjFinance.FinancialChart> <wjFinance.FinancialChart itemsSource={this.state.data} style={{ height: '200px' }} bindingX="date" palette={this.state.palette} rendered={this.chartRendered} initialized={this.initializeIChart}> <wjChart.FlexChartLegend position="Bottom"></wjChart.FlexChartLegend> <wjChart.FlexChartAxis wjProperty="axisX" labelAngle={0} axisLine={true}></wjChart.FlexChartAxis> <wjFinanceAnalytics.FlexChartAtr binding="high,low,open,close" name="アベレージトゥルーレンジ" period={this.state.properties.atrPeriod} visibility={this.state.selectedIndicator === 'atr' ? 'Visible' : 'Hidden'}> </wjFinanceAnalytics.FlexChartAtr> <wjFinanceAnalytics.FlexChartRsi binding="close" name="相対力指数" period={this.state.properties.rsiPeriod} visibility={this.state.selectedIndicator === 'rsi' ? 'Visible' : 'Hidden'}> </wjFinanceAnalytics.FlexChartRsi> <wjFinanceAnalytics.FlexChartCci binding="high,low,open,close" name="商品チャネル指数" period={this.state.properties.cciPeriod} visibility={this.state.selectedIndicator === 'cci' ? 'Visible' : 'Hidden'}> </wjFinanceAnalytics.FlexChartCci> <wjFinanceAnalytics.FlexChartWilliamsR binding="high,low,open,close" name="Williams %R" period={this.state.properties.williamsRPeriod} visibility={this.state.selectedIndicator === 'williamsR' ? 'Visible' : 'Hidden'}> </wjFinanceAnalytics.FlexChartWilliamsR> <wjFinanceAnalytics.FlexChartMacd binding="close" name="移動平均収束拡散,シグナル" styles={this.state.properties.macdStyles} fastPeriod={this.state.properties.fastPeriod} slowPeriod={this.state.properties.slowPeriod} smoothingPeriod={this.state.properties.smoothingPeriod} visibility={this.state.selectedIndicator === 'macd' ? 'Visible' : 'Hidden'}> </wjFinanceAnalytics.FlexChartMacd> <wjFinanceAnalytics.FlexChartMacdHistogram binding="close" name="ヒストグラム" fastPeriod={this.state.properties.fastPeriod} slowPeriod={this.state.properties.slowPeriod} smoothingPeriod={this.state.properties.smoothingPeriod} visibility={this.state.selectedIndicator === 'macd' ? 'Visible' : 'Hidden'}> </wjFinanceAnalytics.FlexChartMacdHistogram> <wjFinanceAnalytics.FlexChartStochastic binding="high,low,open,close" name="%K,%D" kPeriod={this.state.properties.stochKPeriod} dPeriod={this.state.properties.stochDPeriod} smoothingPeriod={this.state.properties.stochSmoothingPeriod} visibility={this.state.selectedIndicator === 'stoch' ? 'Visible' : 'Hidden'} styles={this.state.properties.stochStyles}> </wjFinanceAnalytics.FlexChartStochastic> </wjFinance.FinancialChart> </div>; } } 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 FlexChart Financial Indicators</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> .container-fluid .wj-combobox { width: 250px; } .wj-flexchart { height: 300px; } body { margin-bottom: 24pt; } export function getIndicatorList() { return [ { name: 'アベレージトゥルーレンジ', abbreviation: 'atr' }, { name: '相対力指数', abbreviation: 'rsi' }, { name: '商品チャネル指数', abbreviation: 'cci' }, { name: 'ウィリアムズ%R', abbreviation: 'williamsR' }, { name: '移動平均収束拡散', abbreviation: 'macd' }, { name: 'ストキャスティクス', abbreviation: 'stoch' } ]; } // 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"> <div id="settingsBody" class="panel-collapse collapse in"> <div class="panel-body"> <!-- Indicator Selector --> <ul class="list-inline"> <li> <label>テクニカル指標の種類</label> <wj-combo-box :itemsSource="indicators" :textChanged="typeChanged" selectedValuePath="abbreviation" displayMemberPath="name" :selectedValue="selectedIndicator"> </wj-combo-box> </li> </ul> <!-- ATR Properties --> <ul class="list-inline" v-show="selectedIndicator === 'atr'"> <li> <label>期間</label> <wj-input-number :valueChanged="atrPeriodChanged" :value="14" :min="2" :max="data.length > 0 ? data.length - 1 : properties.atrPeriod" :step="1" format="n0"> </wj-input-number> </li> </ul> <!-- RSI Properties --> <ul class="list-inline" v-show="selectedIndicator === 'rsi'"> <li> <label>期間</label> <wj-input-number :valueChanged="rsiPeriodChanged" :value="14" :min="2" :max="data.length > 0 ? data.length - 1 : properties.rsiPeriod" :step="1" format="n0"> </wj-input-number> </li> </ul> <!-- CCI Properties --> <ul class="list-inline" v-show="selectedIndicator === 'cci'"> <li> <label>期間</label> <wj-input-number :valueChanged="cciPeriodChanged" :value="20" :min="2" :max="data.length > 0 ? data.length - 1 : properties.cciPeriod" :step="1" format="n0"> </wj-input-number> </li> </ul> <!-- Williams %R Properties --> <ul class="list-inline" v-show="selectedIndicator === 'williamsR'"> <li> <label>期間</label> <wj-input-number :valueChanged="wrPeriodChanged" :value="14" :min="2" :max="data.length > 0 ? data.length - 1 : properties.williamsRPeriod" :step="1" format="n0"> </wj-input-number> </li> </ul> <!-- MACD & MACD Histogram Properties --> <ul class="list-inline" v-show="selectedIndicator === 'macd'"> <li> <label>高速期間</label> <wj-input-number :value="properties.fastPeriod" :min="2" :max="data.length > 0 ? data.length - 1 : properties.fastPeriod" :step="1" format="n0" :valueChanged="fastPeriodChanged"> </wj-input-number> </li> <li> <label>低速期間</label> <wj-input-number :value="properties.slowPeriod" :min="2" :max="data.length > 0 ? data.length - 1 : properties.slowPeriod" :step="1" format="n0" :valueChanged="slowPeriodChanged"> </wj-input-number> </li> <li> <label>シグナルスムージング期間</label> <wj-input-number :value="properties.smoothingPeriod" :min="2" :max="data.length > 0 ? data.length - 1 : properties.smoothingPeriod" :step="1" format="n0" :valueChanged="smoothingPeriodChanged"> </wj-input-number> </li> </ul> <!-- Fast Stochastic Properties --> <ul class="list-inline" v-show="selectedIndicator === 'stoch'"> <li> <label>K期間</label> <wj-input-number :value="properties.stochKPeriod" :min="2" :max="data.length > 0 ? data.length - 1 : properties.stochKPeriod" :step="1" format="n0" :valueChanged="stochKPeriodChanged"> </wj-input-number> </li> <li> <label>D期間</label> <wj-input-number :value="properties.stochDPeriod" :min="2" :max="data.length > 0 ? data.length - 1 : properties.stochDPeriod" :step="1" format="n0" :valueChanged="stochDPeriodChanged"> </wj-input-number> </li> <li> <label>スムージング期間</label> <wj-input-number :value="1" :min="1" :max="data.length > 0 ? data.length - 1 : properties.stochSmoothingPeriod" :step="1" format="n0" :valueChanged="stochSmoothingPeriodChanged"> </wj-input-number> </li> </ul> </div> </div> <!-- FinancialChart --> <wj-financial-chart :itemsSource="data" bindingX="date" :palette="palette" :tooltipContent="tooltip" :initialized="initializeChart"> <wj-financial-chart-series binding="close" name="Box Inc"></wj-financial-chart-series> <wj-flex-chart-legend position="Top"></wj-flex-chart-legend> <wj-flex-chart-axis wjProperty="axisX" :labelAngle="0" :axisLine="true"></wj-flex-chart-axis> </wj-financial-chart> <!-- Indicators Chart --> <wj-financial-chart :itemsSource="data" style="height: 200px" bindingX="date" :palette="palette" :tooltipContent="tooltip" :rendered="chartRendered" :initialized="initializeIChart"> <wj-flex-chart-legend position="Bottom"></wj-flex-chart-legend> <wj-flex-chart-axis wjProperty="axisX" :labelAngle="0" :axisLine="true"></wj-flex-chart-axis> <wj-flex-chart-atr binding="high,low,open,close" name="アベレージトゥルーレンジ" :period="properties.atrPeriod" :visibility="selectedIndicator === 'atr' ? 'Visible' : 'Hidden'"> </wj-flex-chart-atr> <wj-flex-chart-rsi binding="close" name="相対力指数" :period="properties.rsiPeriod" :visibility="selectedIndicator === 'rsi' ? 'Visible' : 'Hidden'"> </wj-flex-chart-rsi> <wj-flex-chart-cci binding="high,low,open,close" name="商品チャネル指数" :period="properties.cciPeriod" :visibility="selectedIndicator === 'cci' ? 'Visible' : 'Hidden'"> </wj-flex-chart-cci> <wj-flex-chart-williams-r binding="high,low,open,close" name="Williams %R" :period="properties.williamsRPeriod" :visibility="selectedIndicator === 'williamsR' ? 'Visible' : 'Hidden'"> </wj-flex-chart-williams-r> <wj-flex-chart-macd binding="close" name="移動平均収束拡散,シグナル" :styles="properties.macdStyles" :fastPeriod="properties.fastPeriod" :slowPeriod="properties.slowPeriod" :smoothingPeriod="properties.smoothingPeriod" :visibility="selectedIndicator === 'macd' ? 'Visible' : 'Hidden'"> </wj-flex-chart-macd> <wj-flex-chart-macd-histogram binding="close" name="ヒストグラム" :fastPeriod="properties.fastPeriod" :slowPeriod="properties.slowPeriod" :smoothingPeriod="properties.smoothingPeriod" :visibility="selectedIndicator === 'macd' ? 'Visible' : 'Hidden'"> </wj-flex-chart-macd-histogram> <wj-flex-chart-stochastic binding="high,low,open,close" name="%K,%D" :kPeriod="properties.stochKPeriod" :dPeriod="properties.stochDPeriod" :smoothingPeriod="properties.stochSmoothingPeriod" :visibility="selectedIndicator === 'stoch' ? 'Visible' : 'Hidden'" :styles="properties.stochStyles"> </wj-flex-chart-stochastic> </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, getIndicatorList } from './data'; import * as wjCore from '@grapecity/wijmo'; 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>', indicators: getIndicatorList(), selectedIndicator: 'atr', properties: { // ATR, CCI, RSI, Williams %R atrPeriod: 14, cciPeriod: 20, rsiPeriod: 14, williamsRPeriod: 14, // MACD fastPeriod: 12, slowPeriod: 26, smoothingPeriod: 9, macdStyles: { // named styles macdLine: { stroke: '#bfa554' }, signalLine: { stroke: '#bf8c54' } }, // Fast Stochastic stochKPeriod: 14, stochDPeriod: 3, stochSmoothingPeriod: 1, stochStyles: { // named styles kLine: { stroke: '#eddd46' }, dLine: { stroke: '#edb747' } } } } }, methods: { initializeChart: function(flex) { this.theChart = flex; }, initializeIChart: function(flex) { this.iChart = flex; }, typeChanged: function(combo) { this.selectedIndicator = combo.selectedValue; }, chartRendered: function() { this.iChart.axisX.min = this.theChart.axisX.actualMin; this.iChart.axisX.max = this.theChart.axisX.actualMax; }, fastPeriodChanged: function(input) { var data = this.data, props = this.properties, len, smoothing; if (data.length <= 0) { return; } len = data.length; smoothing = props.smoothingPeriod; props.fastPeriod = wjCore.clamp(input.value, 2, Math.abs(len - smoothing)); }, slowPeriodChanged: function(input) { var data = this.data, props = this.properties, len, smoothing; if (data.length <= 0) { return; } len = data.length; smoothing = props.smoothingPeriod; props.slowPeriod = wjCore.clamp(input.value, 2, Math.abs(len - smoothing)); }, smoothingPeriodChanged: function(input) { var data = this.data, props = this.properties, len, max; if (data.length <= 0) { return; } len = data.length; max = Math.max(props.fastPeriod, props.slowPeriod); props.smoothingPeriod = wjCore.clamp(input.value, 2, Math.abs(len - max)); }, stochKPeriodChanged: function(input) { var data = this.data, props = this.properties, len, max; if (data.length <= 0) { return; } len = data.length; max = Math.abs(len - props.stochDPeriod); if (props.stochSmoothingPeriod > 1) { max -= props.stochSmoothingPeriod; } props.stochKPeriod = wjCore.clamp(input.value, 2, max); }, stochDPeriodChanged: function(input) { var data = this.data, props = this.properties, len, max; if (data.length <= 0) { return; } len = data.length; max = Math.abs(len - props.stochKPeriod); if (props.stochSmoothingPeriod > 1) { max -= props.stochSmoothingPeriod; } props.stochDPeriod = wjCore.clamp(input.value, 2, max); }, stochSmoothingPeriodChanged: function(input) { var data = this.data, props = this.properties, len, max; if (data.length <= 0 || input.value <= 1) { return; } len = data.length; max = Math.abs(len - props.stochKPeriod - props.stochDPeriod); max = max || 1; props.stochSmoothingPeriod = wjCore.clamp(input.value, 1, max); }, atrPeriodChanged: function(input) { if (input.value < input.min || input.value > input.max) { return; } this.properties.atrPeriod = input.value; }, rsiPeriodChanged: function(input) { if (input.value < input.min || input.value > input.max) { return; } this.properties.rsiPeriod = input.value; }, cciPeriodChanged: function(input) { if (input.value < input.min || input.value > input.max) { return; } this.properties.cciPeriod = input.value; }, wrPeriodChanged: function(input) { if (input.value < input.min || input.value > input.max) { return; } this.properties.williamsRPeriod = input.value; }, 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> .container-fluid .wj-combobox { width: 250px; } body { margin-bottom: 24px; } label { margin-right: 3px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Financial Indicators</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 getIndicatorList() { return [ { name: 'アベレージトゥルーレンジ', abbreviation: 'atr' }, { name: '相対力指数', abbreviation: 'rsi' }, { name: '商品チャネル指数', abbreviation: 'cci' }, { name: 'ウィリアムズ%R', abbreviation: 'williamsR' }, { name: '移動平均収束拡散', abbreviation: 'macd' }, { name: 'ストキャスティクス', abbreviation: 'stoch' } ]; } 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 } ]; }