チャート:注釈

サンプルは注釈付きのスプライン面チャートを示しています。

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as chart from '@grapecity/wijmo.chart'; import * as animation from '@grapecity/wijmo.chart.animation'; import * as annotation from '@grapecity/wijmo.chart.annotation'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let linechart = new chart.FlexChart('#chart', { legend: { position: chart.Position.None }, chartType: chart.ChartType.SplineArea, bindingX: 'date', series: [{ binding: 'close', name: 'Alphabet Inc' }], axisY: { min: 797 }, itemsSource: getData(), palette: ['rgba(0,95,173,1)', 'rgba(240,100,0,1)', 'rgba(0,147,48,1)', 'rgba(228,0,177,1)', 'rgba(182,88,0,1)', 'rgba(106,39,156,1)', 'rgba(213,162,17,1)', 'rgba(220,1,39,1)', 'rgba(0,0,0,1)'] }); // let ani = new animation.ChartAnimation(linechart); // // add annotation layer let annotations = new annotation.AnnotationLayer(linechart, [ { type: 'Rectangle', attachment: 'DataIndex', pointIndex: 33, position: 'Top', tooltip: '<b>悪い</b>ニュースが発表されました。', content: 'N', width: 20, height: 20, style: { fill: '#01DFD7', stroke: '#000000' } }, { type: 'Rectangle', attachment: 'DataIndex', pointIndex: 27, position: 'Top', tooltip: '<b>良い</b>ニュースが発表されました。', content: 'P', width: 20, height: 20, style: { fill: '#01DFD7', stroke: '#000000' } }, { type: 'Image', href: 'https://maps.google.com/mapfiles/marker_green.png', width: 15, height: 30, attachment: 'DataCoordinate', point: { x: new Date(2017, 1, 7), y: 800 }, tooltip: '買い時' }, { type: 'Image', href: 'https://maps.google.com/mapfiles/marker_yellow.png', width: 15, height: 30, attachment: 'DataCoordinate', point: { x: new Date(2017, 1, 24), y: 800 }, tooltip: '乱高下' }, { type: 'Image', href: 'https://maps.google.com/mapfiles/marker_green.png', width: 15, height: 30, attachment: 'DataCoordinate', point: { x: new Date(2017, 2, 5), y: 800 }, tooltip: '堅調' } ]); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Area with Annotations</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"> <div id="chart"></div> </div> </body> </html> export function getData() { return [ { date: new Date(2017, 2, 15), open: 867.94, high: 869.88, low: 861.3, close: 868.39, vol: 1332885 }, { date: new Date(2017, 2, 14), open: 863.75, high: 867.58, low: 860.13, close: 865.91, vol: 1061692 }, { date: new Date(2017, 2, 13), open: 860.83, high: 867.13, low: 860.82, close: 864.58, vol: 1166605 }, { date: new Date(2017, 2, 10), open: 862.7, high: 864.23, low: 857.61, close: 861.4, vol: 1336585 }, { date: new Date(2017, 2, 9), open: 853.69, high: 860.71, low: 852.67, close: 857.84, vol: 1347697 }, { date: new Date(2017, 2, 8), open: 853.12, high: 856.93, low: 851.25, close: 853.64, vol: 1029834 }, { date: new Date(2017, 2, 7), open: 847.26, high: 853.33, low: 845.52, close: 851.15, vol: 1038696 }, { date: new Date(2017, 2, 6), open: 846.86, high: 848.94, low: 841.17, close: 847.27, vol: 1047872 }, { date: new Date(2017, 2, 3), open: 848.94, high: 850.82, low: 844.7, close: 849.08, vol: 1006612 }, { date: new Date(2017, 2, 2), open: 856.31, high: 856.49, low: 848.72, close: 849.85, vol: 1250938 }, { date: new Date(2017, 2, 1), open: 851.38, high: 858, low: 849.02, close: 856.75, vol: 1818671 }, { date: new Date(2017, 1, 28), open: 847.35, high: 848.83, low: 841.44, close: 844.93, vol: 1383119 }, { date: new Date(2017, 1, 27), open: 844.95, high: 850.67, low: 843.01, close: 849.67, vol: 1010333 }, { date: new Date(2017, 1, 24), open: 847.65, high: 848.36, low: 842.96, close: 847.81, vol: 1346189 }, { date: new Date(2017, 1, 23), open: 851.08, high: 852.62, low: 842.5, close: 851, vol: 1386681 }, { date: new Date(2017, 1, 22), open: 848, high: 853.79, low: 846.71, close: 851.36, vol: 1224889 }, { date: new Date(2017, 1, 21), open: 847.99, high: 852.2, low: 846.55, close: 849.27, vol: 1261062 }, { date: new Date(2017, 1, 17), open: 841.31, high: 846.94, low: 839.78, close: 846.55, vol: 1461210 }, { date: new Date(2017, 1, 16), open: 838.5, high: 842.69, low: 837.26, close: 842.17, vol: 1005084 }, { date: new Date(2017, 1, 15), open: 838.81, high: 841.77, low: 836.22, close: 837.32, vol: 1357185 }, { date: new Date(2017, 1, 14), open: 839.77, high: 842, low: 835.83, close: 840.03, vol: 1363345 }, { date: new Date(2017, 1, 13), open: 837.7, high: 841.74, low: 836.25, close: 838.96, vol: 1295708 }, { date: new Date(2017, 1, 10), open: 832.95, high: 837.15, low: 830.51, close: 834.85, vol: 1415128 }, { date: new Date(2017, 1, 9), open: 831.73, high: 831.98, low: 826.5, close: 830.06, vol: 1194238 }, { date: new Date(2017, 1, 8), open: 830.53, high: 834.25, low: 825.11, close: 829.88, vol: 1302225 }, { date: new Date(2017, 1, 7), open: 825.5, high: 831.92, low: 823.29, close: 829.23, vol: 1666605 }, { date: new Date(2017, 1, 6), open: 820.92, high: 822.39, low: 814.29, close: 821.62, vol: 1350875 }, { date: new Date(2017, 1, 3), open: 823.13, high: 826.13, low: 819.35, close: 820.13, vol: 1528095 }, { date: new Date(2017, 1, 2), open: 815, high: 824.56, low: 812.05, close: 818.26, vol: 1689179 }, { date: new Date(2017, 1, 1), open: 824, high: 824, low: 812.25, close: 815.24, vol: 2251047 }, { date: new Date(2017, 0, 31), open: 819.5, high: 823.07, low: 813.4, close: 820.19, vol: 2020180 }, { date: new Date(2017, 0, 30), open: 837.06, high: 837.23, low: 821.03, close: 823.83, vol: 3516933 }, { date: new Date(2017, 0, 27), open: 859, high: 867, low: 841.9, close: 845.03, vol: 3752497 }, { date: new Date(2017, 0, 26), open: 859.05, high: 861, low: 850.52, close: 856.98, vol: 3493251 }, { date: new Date(2017, 0, 25), open: 853.55, high: 858.79, low: 849.74, close: 858.45, vol: 1662148 }, { date: new Date(2017, 0, 24), open: 846.98, high: 851.52, low: 842.28, close: 849.53, vol: 1688375 }, { date: new Date(2017, 0, 23), open: 831.61, high: 845.54, low: 828.7, close: 844.43, vol: 2457377 }, { date: new Date(2017, 0, 20), open: 829.09, high: 829.24, low: 824.6, close: 828.17, vol: 1306183 }, { date: new Date(2017, 0, 19), open: 829, high: 833, low: 823.96, close: 824.37, vol: 1070454 }, { date: new Date(2017, 0, 18), open: 829.8, high: 829.81, low: 824.08, close: 829.02, vol: 1027698 }, { date: new Date(2017, 0, 17), open: 830, high: 830.18, low: 823.2, close: 827.46, vol: 1440905 }, { date: new Date(2017, 0, 13), open: 831, high: 834.65, low: 829.52, close: 830.94, vol: 1290182 }, { date: new Date(2017, 0, 12), open: 828.38, high: 830.38, low: 821.01, close: 829.53, vol: 1350308 }, { date: new Date(2017, 0, 11), open: 826.62, high: 829.9, low: 821.47, close: 829.86, vol: 1325394 }, { date: new Date(2017, 0, 10), open: 827.07, high: 829.41, low: 823.14, close: 826.01, vol: 1197442 }, { date: new Date(2017, 0, 9), open: 826.37, high: 830.43, low: 821.62, close: 827.18, vol: 1408924 }, { date: new Date(2017, 0, 6), open: 814.99, high: 828.96, low: 811.5, close: 825.21, vol: 2017097 }, { date: new Date(2017, 0, 5), open: 807.5, high: 813.74, low: 805.92, close: 813.02, vol: 1340535 }, { date: new Date(2017, 0, 4), open: 809.89, high: 813.43, low: 804.11, close: 807.77, vol: 1515339 }, { date: new Date(2017, 0, 3), open: 800.62, high: 811.44, low: 796.89, close: 808.01, vol: 1959033 } ]; } body { margin-bottom: 24px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, Inject, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjChartModule } from '@grapecity/wijmo.angular2.chart'; import { WjChartAnimationModule } from '@grapecity/wijmo.angular2.chart.animation'; import { WjChartAnnotationModule } from '@grapecity/wijmo.angular2.chart.annotation'; import { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); } // getDate(y: number, m: number, d: number) { return new Date(y, m, d); } } // @NgModule({ imports: [WjChartModule, WjChartAnnotationModule, WjChartAnimationModule, 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 FlexGrid Area with Annotations</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"> <wj-flex-chart [itemsSource]="data" [bindingX]="'date'" [chartType]="'SplineArea'" [palette]="['rgba(0,95,173,1)', 'rgba(240,100,0,1)', 'rgba(0,147,48,1)', 'rgba(228,0,177,1)', 'rgba(182,88,0,1)', 'rgba(106,39,156,1)', 'rgba(213,162,17,1)', 'rgba(220,1,39,1)', 'rgba(0,0,0,1)']"> <wj-flex-chart-legend [position]="'None'"></wj-flex-chart-legend> <wj-flex-chart-axis [wjProperty]="'axisY'" [min]="797"></wj-flex-chart-axis> <wj-flex-chart-series [binding]="'close'" [name]="'Alphabet Inc'"></wj-flex-chart-series> <wj-flex-chart-annotation-layer> <wj-flex-chart-annotation-rectangle [attachment]="'DataIndex'" [pointIndex]="33" [position]="'Top'" [tooltip]="'<b>悪い</b>ニュースが発表されました。'" [content]="'N'" [width]="20" [height]="20" [style]="{ fill: '#01DFD7', stroke: '#000000' }"> </wj-flex-chart-annotation-rectangle> <wj-flex-chart-annotation-rectangle [attachment]="'DataIndex'" [pointIndex]="27" [position]="'Top'" [tooltip]="'<b>良い</b>ニュースが発表されました。'" [content]="'P'" [width]="20" [height]="20" [style]="{ fill: '#01DFD7', stroke: '#000000' }"> </wj-flex-chart-annotation-rectangle> <wj-flex-chart-annotation-image [href]="'https://maps.google.com/mapfiles/marker_green.png'" [width]="15" [height]="30" [attachment]="'DataCoordinate'" [tooltip]="'買い時'"> <wj-flex-chart-data-point [wjProperty]="'point'" [x]="getDate(2017, 1, 7)" [y]="800"> </wj-flex-chart-data-point> </wj-flex-chart-annotation-image> <wj-flex-chart-annotation-image [href]="'https://maps.google.com/mapfiles/marker_yellow.png'" [width]="15" [height]="30" [attachment]="'DataCoordinate'" [tooltip]="'乱高下'"> <wj-flex-chart-data-point [wjProperty]="'point'" [x]="getDate(2017, 1, 24)" [y]="800"> </wj-flex-chart-data-point> </wj-flex-chart-annotation-image> <wj-flex-chart-annotation-image [href]="'https://maps.google.com/mapfiles/marker_green.png'" [width]="15" [height]="30" [attachment]="'DataCoordinate'" [tooltip]="'堅調'"> <wj-flex-chart-data-point [wjProperty]="'point'" [x]="getDate(2017, 2, 5)" [y]="800"> </wj-flex-chart-data-point> </wj-flex-chart-annotation-image> </wj-flex-chart-annotation-layer> <wj-flex-chart-animation></wj-flex-chart-animation> </wj-flex-chart> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getData() { return [ { date: new Date(2017, 2, 15), open: 867.94, high: 869.88, low: 861.3, close: 868.39, vol: 1332885 }, { date: new Date(2017, 2, 14), open: 863.75, high: 867.58, low: 860.13, close: 865.91, vol: 1061692 }, { date: new Date(2017, 2, 13), open: 860.83, high: 867.13, low: 860.82, close: 864.58, vol: 1166605 }, { date: new Date(2017, 2, 10), open: 862.7, high: 864.23, low: 857.61, close: 861.4, vol: 1336585 }, { date: new Date(2017, 2, 9), open: 853.69, high: 860.71, low: 852.67, close: 857.84, vol: 1347697 }, { date: new Date(2017, 2, 8), open: 853.12, high: 856.93, low: 851.25, close: 853.64, vol: 1029834 }, { date: new Date(2017, 2, 7), open: 847.26, high: 853.33, low: 845.52, close: 851.15, vol: 1038696 }, { date: new Date(2017, 2, 6), open: 846.86, high: 848.94, low: 841.17, close: 847.27, vol: 1047872 }, { date: new Date(2017, 2, 3), open: 848.94, high: 850.82, low: 844.7, close: 849.08, vol: 1006612 }, { date: new Date(2017, 2, 2), open: 856.31, high: 856.49, low: 848.72, close: 849.85, vol: 1250938 }, { date: new Date(2017, 2, 1), open: 851.38, high: 858, low: 849.02, close: 856.75, vol: 1818671 }, { date: new Date(2017, 1, 28), open: 847.35, high: 848.83, low: 841.44, close: 844.93, vol: 1383119 }, { date: new Date(2017, 1, 27), open: 844.95, high: 850.67, low: 843.01, close: 849.67, vol: 1010333 }, { date: new Date(2017, 1, 24), open: 847.65, high: 848.36, low: 842.96, close: 847.81, vol: 1346189 }, { date: new Date(2017, 1, 23), open: 851.08, high: 852.62, low: 842.5, close: 851, vol: 1386681 }, { date: new Date(2017, 1, 22), open: 848, high: 853.79, low: 846.71, close: 851.36, vol: 1224889 }, { date: new Date(2017, 1, 21), open: 847.99, high: 852.2, low: 846.55, close: 849.27, vol: 1261062 }, { date: new Date(2017, 1, 17), open: 841.31, high: 846.94, low: 839.78, close: 846.55, vol: 1461210 }, { date: new Date(2017, 1, 16), open: 838.5, high: 842.69, low: 837.26, close: 842.17, vol: 1005084 }, { date: new Date(2017, 1, 15), open: 838.81, high: 841.77, low: 836.22, close: 837.32, vol: 1357185 }, { date: new Date(2017, 1, 14), open: 839.77, high: 842, low: 835.83, close: 840.03, vol: 1363345 }, { date: new Date(2017, 1, 13), open: 837.7, high: 841.74, low: 836.25, close: 838.96, vol: 1295708 }, { date: new Date(2017, 1, 10), open: 832.95, high: 837.15, low: 830.51, close: 834.85, vol: 1415128 }, { date: new Date(2017, 1, 9), open: 831.73, high: 831.98, low: 826.5, close: 830.06, vol: 1194238 }, { date: new Date(2017, 1, 8), open: 830.53, high: 834.25, low: 825.11, close: 829.88, vol: 1302225 }, { date: new Date(2017, 1, 7), open: 825.5, high: 831.92, low: 823.29, close: 829.23, vol: 1666605 }, { date: new Date(2017, 1, 6), open: 820.92, high: 822.39, low: 814.29, close: 821.62, vol: 1350875 }, { date: new Date(2017, 1, 3), open: 823.13, high: 826.13, low: 819.35, close: 820.13, vol: 1528095 }, { date: new Date(2017, 1, 2), open: 815, high: 824.56, low: 812.05, close: 818.26, vol: 1689179 }, { date: new Date(2017, 1, 1), open: 824, high: 824, low: 812.25, close: 815.24, vol: 2251047 }, { date: new Date(2017, 0, 31), open: 819.5, high: 823.07, low: 813.4, close: 820.19, vol: 2020180 }, { date: new Date(2017, 0, 30), open: 837.06, high: 837.23, low: 821.03, close: 823.83, vol: 3516933 }, { date: new Date(2017, 0, 27), open: 859, high: 867, low: 841.9, close: 845.03, vol: 3752497 }, { date: new Date(2017, 0, 26), open: 859.05, high: 861, low: 850.52, close: 856.98, vol: 3493251 }, { date: new Date(2017, 0, 25), open: 853.55, high: 858.79, low: 849.74, close: 858.45, vol: 1662148 }, { date: new Date(2017, 0, 24), open: 846.98, high: 851.52, low: 842.28, close: 849.53, vol: 1688375 }, { date: new Date(2017, 0, 23), open: 831.61, high: 845.54, low: 828.7, close: 844.43, vol: 2457377 }, { date: new Date(2017, 0, 20), open: 829.09, high: 829.24, low: 824.6, close: 828.17, vol: 1306183 }, { date: new Date(2017, 0, 19), open: 829, high: 833, low: 823.96, close: 824.37, vol: 1070454 }, { date: new Date(2017, 0, 18), open: 829.8, high: 829.81, low: 824.08, close: 829.02, vol: 1027698 }, { date: new Date(2017, 0, 17), open: 830, high: 830.18, low: 823.2, close: 827.46, vol: 1440905 }, { date: new Date(2017, 0, 13), open: 831, high: 834.65, low: 829.52, close: 830.94, vol: 1290182 }, { date: new Date(2017, 0, 12), open: 828.38, high: 830.38, low: 821.01, close: 829.53, vol: 1350308 }, { date: new Date(2017, 0, 11), open: 826.62, high: 829.9, low: 821.47, close: 829.86, vol: 1325394 }, { date: new Date(2017, 0, 10), open: 827.07, high: 829.41, low: 823.14, close: 826.01, vol: 1197442 }, { date: new Date(2017, 0, 9), open: 826.37, high: 830.43, low: 821.62, close: 827.18, vol: 1408924 }, { date: new Date(2017, 0, 6), open: 814.99, high: 828.96, low: 811.5, close: 825.21, vol: 2017097 }, { date: new Date(2017, 0, 5), open: 807.5, high: 813.74, low: 805.92, close: 813.02, vol: 1340535 }, { date: new Date(2017, 0, 4), open: 809.89, high: 813.43, low: 804.11, close: 807.77, vol: 1515339 }, { date: new Date(2017, 0, 3), open: 800.62, high: 811.44, low: 796.89, close: 808.01, vol: 1959033 } ]; } } body { margin-bottom: 24px; } 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.react.chart'; import * as wjChartAnimate from '@grapecity/wijmo.react.chart.animation'; import * as wjChartAnnotation from '@grapecity/wijmo.react.chart.annotation'; import { getData } from './data'; // class App extends React.Component { constructor(props) { super(props); this.state = { data: getData(), palette: ['rgba(0,95,173,1)', 'rgba(240,100,0,1)', 'rgba(0,147,48,1)', 'rgba(228,0,177,1)', 'rgba(182,88,0,1)', 'rgba(106,39,156,1)', 'rgba(213,162,17,1)', 'rgba(220,1,39,1)', 'rgba(0,0,0,1)'] }; } render() { return <div className="container-fluid"> <wjChart.FlexChart itemsSource={this.state.data} bindingX="date" chartType="SplineArea" palette={this.state.palette}> <wjChart.FlexChartLegend position="None"></wjChart.FlexChartLegend> <wjChart.FlexChartAxis wjProperty="axisY" min={797}></wjChart.FlexChartAxis> <wjChart.FlexChartSeries binding="close" name="Alphabet Inc"></wjChart.FlexChartSeries> <wjChartAnnotation.FlexChartAnnotationLayer> <wjChartAnnotation.FlexChartAnnotation type='Rectangle' attachment="DataIndex" pointIndex={33} position="Top" tooltip="<b>悪い</b>ニュースが発表されました。" content="N" width={20} height={20} style={{ fill: '#01DFD7', stroke: '#000000' }}> </wjChartAnnotation.FlexChartAnnotation> <wjChartAnnotation.FlexChartAnnotation type='Rectangle' attachment="DataIndex" pointIndex={27} position="Top" tooltip="<b>良い</b>ニュースが発表されました。" content="P" width={20} height={20} style={{ fill: '#01DFD7', stroke: '#000000' }}> </wjChartAnnotation.FlexChartAnnotation> <wjChartAnnotation.FlexChartAnnotation type='Image' href="https://maps.google.com/mapfiles/marker_green.png" width={15} point={{ x: new Date(2017, 1, 7), y: 800 }} height={30} attachment="DataCoordinate" tooltip="買い時"> </wjChartAnnotation.FlexChartAnnotation> <wjChartAnnotation.FlexChartAnnotation type='Image' href="https://maps.google.com/mapfiles/marker_yellow.png" width={15} point={{ x: new Date(2017, 1, 24), y: 800 }} height={30} attachment="DataCoordinate" tooltip="乱高下"> </wjChartAnnotation.FlexChartAnnotation> <wjChartAnnotation.FlexChartAnnotation type='Image' href="https://maps.google.com/mapfiles/marker_green.png" width={15} point={{ x: new Date(2017, 2, 5), y: 800 }} height={30} attachment="DataCoordinate" tooltip="堅調"> </wjChartAnnotation.FlexChartAnnotation> </wjChartAnnotation.FlexChartAnnotationLayer> <wjChartAnimate.FlexChartAnimation></wjChartAnimate.FlexChartAnimation> </wjChart.FlexChart> </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 FlexGrid Area with Annotations</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; } export function getData() { return [ { date: new Date(2017, 2, 15), open: 867.94, high: 869.88, low: 861.3, close: 868.39, vol: 1332885 }, { date: new Date(2017, 2, 14), open: 863.75, high: 867.58, low: 860.13, close: 865.91, vol: 1061692 }, { date: new Date(2017, 2, 13), open: 860.83, high: 867.13, low: 860.82, close: 864.58, vol: 1166605 }, { date: new Date(2017, 2, 10), open: 862.7, high: 864.23, low: 857.61, close: 861.4, vol: 1336585 }, { date: new Date(2017, 2, 9), open: 853.69, high: 860.71, low: 852.67, close: 857.84, vol: 1347697 }, { date: new Date(2017, 2, 8), open: 853.12, high: 856.93, low: 851.25, close: 853.64, vol: 1029834 }, { date: new Date(2017, 2, 7), open: 847.26, high: 853.33, low: 845.52, close: 851.15, vol: 1038696 }, { date: new Date(2017, 2, 6), open: 846.86, high: 848.94, low: 841.17, close: 847.27, vol: 1047872 }, { date: new Date(2017, 2, 3), open: 848.94, high: 850.82, low: 844.7, close: 849.08, vol: 1006612 }, { date: new Date(2017, 2, 2), open: 856.31, high: 856.49, low: 848.72, close: 849.85, vol: 1250938 }, { date: new Date(2017, 2, 1), open: 851.38, high: 858, low: 849.02, close: 856.75, vol: 1818671 }, { date: new Date(2017, 1, 28), open: 847.35, high: 848.83, low: 841.44, close: 844.93, vol: 1383119 }, { date: new Date(2017, 1, 27), open: 844.95, high: 850.67, low: 843.01, close: 849.67, vol: 1010333 }, { date: new Date(2017, 1, 24), open: 847.65, high: 848.36, low: 842.96, close: 847.81, vol: 1346189 }, { date: new Date(2017, 1, 23), open: 851.08, high: 852.62, low: 842.5, close: 851, vol: 1386681 }, { date: new Date(2017, 1, 22), open: 848, high: 853.79, low: 846.71, close: 851.36, vol: 1224889 }, { date: new Date(2017, 1, 21), open: 847.99, high: 852.2, low: 846.55, close: 849.27, vol: 1261062 }, { date: new Date(2017, 1, 17), open: 841.31, high: 846.94, low: 839.78, close: 846.55, vol: 1461210 }, { date: new Date(2017, 1, 16), open: 838.5, high: 842.69, low: 837.26, close: 842.17, vol: 1005084 }, { date: new Date(2017, 1, 15), open: 838.81, high: 841.77, low: 836.22, close: 837.32, vol: 1357185 }, { date: new Date(2017, 1, 14), open: 839.77, high: 842, low: 835.83, close: 840.03, vol: 1363345 }, { date: new Date(2017, 1, 13), open: 837.7, high: 841.74, low: 836.25, close: 838.96, vol: 1295708 }, { date: new Date(2017, 1, 10), open: 832.95, high: 837.15, low: 830.51, close: 834.85, vol: 1415128 }, { date: new Date(2017, 1, 9), open: 831.73, high: 831.98, low: 826.5, close: 830.06, vol: 1194238 }, { date: new Date(2017, 1, 8), open: 830.53, high: 834.25, low: 825.11, close: 829.88, vol: 1302225 }, { date: new Date(2017, 1, 7), open: 825.5, high: 831.92, low: 823.29, close: 829.23, vol: 1666605 }, { date: new Date(2017, 1, 6), open: 820.92, high: 822.39, low: 814.29, close: 821.62, vol: 1350875 }, { date: new Date(2017, 1, 3), open: 823.13, high: 826.13, low: 819.35, close: 820.13, vol: 1528095 }, { date: new Date(2017, 1, 2), open: 815, high: 824.56, low: 812.05, close: 818.26, vol: 1689179 }, { date: new Date(2017, 1, 1), open: 824, high: 824, low: 812.25, close: 815.24, vol: 2251047 }, { date: new Date(2017, 0, 31), open: 819.5, high: 823.07, low: 813.4, close: 820.19, vol: 2020180 }, { date: new Date(2017, 0, 30), open: 837.06, high: 837.23, low: 821.03, close: 823.83, vol: 3516933 }, { date: new Date(2017, 0, 27), open: 859, high: 867, low: 841.9, close: 845.03, vol: 3752497 }, { date: new Date(2017, 0, 26), open: 859.05, high: 861, low: 850.52, close: 856.98, vol: 3493251 }, { date: new Date(2017, 0, 25), open: 853.55, high: 858.79, low: 849.74, close: 858.45, vol: 1662148 }, { date: new Date(2017, 0, 24), open: 846.98, high: 851.52, low: 842.28, close: 849.53, vol: 1688375 }, { date: new Date(2017, 0, 23), open: 831.61, high: 845.54, low: 828.7, close: 844.43, vol: 2457377 }, { date: new Date(2017, 0, 20), open: 829.09, high: 829.24, low: 824.6, close: 828.17, vol: 1306183 }, { date: new Date(2017, 0, 19), open: 829, high: 833, low: 823.96, close: 824.37, vol: 1070454 }, { date: new Date(2017, 0, 18), open: 829.8, high: 829.81, low: 824.08, close: 829.02, vol: 1027698 }, { date: new Date(2017, 0, 17), open: 830, high: 830.18, low: 823.2, close: 827.46, vol: 1440905 }, { date: new Date(2017, 0, 13), open: 831, high: 834.65, low: 829.52, close: 830.94, vol: 1290182 }, { date: new Date(2017, 0, 12), open: 828.38, high: 830.38, low: 821.01, close: 829.53, vol: 1350308 }, { date: new Date(2017, 0, 11), open: 826.62, high: 829.9, low: 821.47, close: 829.86, vol: 1325394 }, { date: new Date(2017, 0, 10), open: 827.07, high: 829.41, low: 823.14, close: 826.01, vol: 1197442 }, { date: new Date(2017, 0, 9), open: 826.37, high: 830.43, low: 821.62, close: 827.18, vol: 1408924 }, { date: new Date(2017, 0, 6), open: 814.99, high: 828.96, low: 811.5, close: 825.21, vol: 2017097 }, { date: new Date(2017, 0, 5), open: 807.5, high: 813.74, low: 805.92, close: 813.02, vol: 1340535 }, { date: new Date(2017, 0, 4), open: 809.89, high: 813.43, low: 804.11, close: 807.77, vol: 1515339 }, { date: new Date(2017, 0, 3), open: 800.62, high: 811.44, low: 796.89, close: 808.01, vol: 1959033 } ]; } <template> <div class="container-fluid"> <wj-flex-chart :itemsSource="data" bindingX="date" chartType="SplineArea" :palette="['rgba(0,95,173,1)', 'rgba(240,100,0,1)', 'rgba(0,147,48,1)', 'rgba(228,0,177,1)', 'rgba(182,88,0,1)', 'rgba(106,39,156,1)', 'rgba(213,162,17,1)', 'rgba(220,1,39,1)', 'rgba(0,0,0,1)']"> <wj-flex-chart-legend position="None"></wj-flex-chart-legend> <wj-flex-chart-axis wjProperty="axisY" :min=797></wj-flex-chart-axis> <wj-flex-chart-series binding="close" name="Alphabet Inc"></wj-flex-chart-series> <wj-flex-chart-annotation-layer> <wj-flex-chart-annotation-rectangle attachment="DataIndex" :pointIndex=33 position="Top" tooltip="<b>悪い</b>ニュースが発表されました。" content="N" :width=20 :height=20 :style="{ fill: '#01DFD7', stroke: '#000000' }"> </wj-flex-chart-annotation-rectangle> <wj-flex-chart-annotation-rectangle attachment="DataIndex" :pointIndex=27 position="Top" tooltip="<b>良い</b>ニュースが発表されました。" content="P" :width=20 :height=20 :style="{ fill: '#01DFD7', stroke: '#000000' }"> </wj-flex-chart-annotation-rectangle> <wj-flex-chart-annotation-image href="https://maps.google.com/mapfiles/marker_green.png" :width=15 :point="{ x: new Date(2017, 1, 7), y: 800 }" :height=30 attachment="DataCoordinate" tooltip="買い時"> </wj-flex-chart-annotation-image> <wj-flex-chart-annotation-image href="https://maps.google.com/mapfiles/marker_yellow.png" :width=15 :point="{ x: new Date(2017, 1, 24), y: 800 }" :height=30 attachment="DataCoordinate" tooltip="乱高下"> </wj-flex-chart-annotation-image> <wj-flex-chart-annotation-image href="https://maps.google.com/mapfiles/marker_green.png" :width=15 :point="{ x: new Date(2017, 2, 5), y: 800 }" :height=30 attachment="DataCoordinate" tooltip="堅調"> </wj-flex-chart-annotation-image> </wj-flex-chart-annotation-layer> <wj-flex-chart-animation></wj-flex-chart-animation> </wj-flex-chart> </div> </template> <script> import '@grapecity/wijmo.styles/wijmo.css'; import 'bootstrap.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.chart'; import '@grapecity/wijmo.vue2.chart.annotation'; import { getData } from './data'; // new Vue({ el: '#app', data: { data: getData() } }); </script> <style> body { margin-bottom: 24px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Area with Annotations</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 getData() { return [ { date: new Date(2017,2,15), open: 867.94, high: 869.88, low: 861.3, close: 868.39, vol: 1332885}, { date: new Date(2017,2,14), open: 863.75, high: 867.58, low: 860.13, close: 865.91, vol: 1061692}, { date: new Date(2017,2,13), open: 860.83, high: 867.13, low: 860.82, close: 864.58, vol: 1166605}, { date: new Date(2017,2,10), open: 862.7, high: 864.23, low: 857.61, close: 861.4, vol: 1336585}, { date: new Date(2017,2,9), open: 853.69, high: 860.71, low: 852.67, close: 857.84, vol: 1347697}, { date: new Date(2017,2,8), open: 853.12, high: 856.93, low: 851.25, close: 853.64, vol: 1029834}, { date: new Date(2017,2,7), open: 847.26, high: 853.33, low: 845.52, close: 851.15, vol: 1038696}, { date: new Date(2017,2,6), open: 846.86, high: 848.94, low: 841.17, close: 847.27, vol: 1047872}, { date: new Date(2017,2,3), open: 848.94, high: 850.82, low: 844.7, close: 849.08, vol: 1006612}, { date: new Date(2017,2,2), open: 856.31, high: 856.49, low: 848.72, close: 849.85, vol: 1250938}, { date: new Date(2017,2,1), open: 851.38, high: 858, low: 849.02, close: 856.75, vol: 1818671}, { date: new Date(2017,1,28), open: 847.35, high: 848.83, low: 841.44, close: 844.93, vol: 1383119}, { date: new Date(2017,1,27), open: 844.95, high: 850.67, low: 843.01, close: 849.67, vol: 1010333}, { date: new Date(2017,1,24), open: 847.65, high: 848.36, low: 842.96, close: 847.81, vol: 1346189}, { date: new Date(2017,1,23), open: 851.08, high: 852.62, low: 842.5, close: 851, vol: 1386681}, { date: new Date(2017,1,22), open: 848, high: 853.79, low: 846.71, close: 851.36, vol: 1224889}, { date: new Date(2017,1,21), open: 847.99, high: 852.2, low: 846.55, close: 849.27, vol: 1261062}, { date: new Date(2017,1,17), open: 841.31, high: 846.94, low: 839.78, close: 846.55, vol: 1461210}, { date: new Date(2017,1,16), open: 838.5, high: 842.69, low: 837.26, close: 842.17, vol: 1005084}, { date: new Date(2017,1,15), open: 838.81, high: 841.77, low: 836.22, close: 837.32, vol: 1357185}, { date: new Date(2017,1,14), open: 839.77, high: 842, low: 835.83, close: 840.03, vol: 1363345}, { date: new Date(2017,1,13), open: 837.7, high: 841.74, low: 836.25, close: 838.96, vol: 1295708}, { date: new Date(2017,1,10), open: 832.95, high: 837.15, low: 830.51, close: 834.85, vol: 1415128}, { date: new Date(2017,1,9), open: 831.73, high: 831.98, low: 826.5, close: 830.06, vol: 1194238}, { date: new Date(2017,1,8), open: 830.53, high: 834.25, low: 825.11, close: 829.88, vol: 1302225}, { date: new Date(2017,1,7), open: 825.5, high: 831.92, low: 823.29, close: 829.23, vol: 1666605}, { date: new Date(2017,1,6), open: 820.92, high: 822.39, low: 814.29, close: 821.62, vol: 1350875}, { date: new Date(2017,1,3), open: 823.13, high: 826.13, low: 819.35, close: 820.13, vol: 1528095}, { date: new Date(2017,1,2), open: 815, high: 824.56, low: 812.05, close: 818.26, vol: 1689179}, { date: new Date(2017,1,1), open: 824, high: 824, low: 812.25, close: 815.24, vol: 2251047}, { date: new Date(2017,0,31), open: 819.5, high: 823.07, low: 813.4, close: 820.19, vol: 2020180}, { date: new Date(2017,0,30), open: 837.06, high: 837.23, low: 821.03, close: 823.83, vol: 3516933}, { date: new Date(2017,0,27), open: 859, high: 867, low: 841.9, close: 845.03, vol: 3752497}, { date: new Date(2017,0,26), open: 859.05, high: 861, low: 850.52, close: 856.98, vol: 3493251}, { date: new Date(2017,0,25), open: 853.55, high: 858.79, low: 849.74, close: 858.45, vol: 1662148}, { date: new Date(2017,0,24), open: 846.98, high: 851.52, low: 842.28, close: 849.53, vol: 1688375}, { date: new Date(2017,0,23), open: 831.61, high: 845.54, low: 828.7, close: 844.43, vol: 2457377}, { date: new Date(2017,0,20), open: 829.09, high: 829.24, low: 824.6, close: 828.17, vol: 1306183}, { date: new Date(2017,0,19), open: 829, high: 833, low: 823.96, close: 824.37, vol: 1070454}, { date: new Date(2017,0,18), open: 829.8, high: 829.81, low: 824.08, close: 829.02, vol: 1027698}, { date: new Date(2017,0,17), open: 830, high: 830.18, low: 823.2, close: 827.46, vol: 1440905}, { date: new Date(2017,0,13), open: 831, high: 834.65, low: 829.52, close: 830.94, vol: 1290182}, { date: new Date(2017,0,12), open: 828.38, high: 830.38, low: 821.01, close: 829.53, vol: 1350308}, { date: new Date(2017,0,11), open: 826.62, high: 829.9, low: 821.47, close: 829.86, vol: 1325394}, { date: new Date(2017,0,10), open: 827.07, high: 829.41, low: 823.14, close: 826.01, vol: 1197442}, { date: new Date(2017,0,9), open: 826.37, high: 830.43, low: 821.62, close: 827.18, vol: 1408924}, { date: new Date(2017,0,6), open: 814.99, high: 828.96, low: 811.5, close: 825.21, vol: 2017097}, { date: new Date(2017,0,5), open: 807.5, high: 813.74, low: 805.92, close: 813.02, vol: 1340535}, { date: new Date(2017,0,4), open: 809.89, high: 813.43, low: 804.11, close: 807.77, vol: 1515339}, { date: new Date(2017,0,3), open: 800.62, high: 811.44, low: 796.89, close: 808.01, vol: 1959033} ]; }