チャート:アニメーション

このサンプルでは、FlexPieをアニメーション表示します。

ChartAnimationのanimationModeプロパティを設定することにより、FlexPieに対してそれぞれ異なるアニメーションモードを使用できます。

ChartAnimationクラスには、ミリ秒単位でアニメーション時間を設定するdurationプロパティがあります。

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 chartAnimation from '@grapecity/wijmo.chart.animation'; import { getData, getRandomData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let insertPieIdx = 1; // let flexPie = new chart.FlexPie('#chart', { bindingName: 'id', binding: 'y0', innerRadius: 0, palette: getRandomPalette(), itemsSource: getData() }); // //Pie Easing let pieEasing = new input.Menu('#pieEasing', { itemsSource: [ 'Linear', 'Swing', 'EaseInQuad', 'EaseOutQuad', 'EaseInOutQuad', 'EaseInCubic', 'EaseOutCubic', 'EaseInOutCubic', 'EaseInQuart', 'EaseOutQuart', 'EaseInOutQuart', 'EaseInQuint', 'EaseOutQuint', 'EaseInOutQuint', 'EaseInSine', 'EaseOutSine', 'EaseInOutSine', 'EaseInExpo', 'EaseOutExpo', 'EaseInOutExpo', 'EaseInCirc', 'EaseOutCirc', 'EaseInOutCirc', 'EaseInBack', 'EaseOutBack', 'EaseInOutBack', 'EaseInBounce', 'EaseOutBounce', 'EaseInOutBounce', 'EaseInElastic', 'EaseOutElastic', 'EaseInOutElastic' ], selectedValue: 'Swing', itemClicked: (sender) => { pieAnimation.easing = sender.selectedValue; pieAnimation.animate(); updateMenuHeader(pieEasing, '<b>イージング</b>: ' + sender.text); } }); updateMenuHeader(pieEasing, '<b>イージング</b>: ' + pieEasing.text); // //Pie Duration let pieDuration = new input.InputNumber('#pieDuration', { value: 400, min: 200, max: 5000, step: 200, format: 'n0', valueChanged: (sender) => { pieAnimation.duration = sender.value; pieAnimation.animate(); } }); // // Pie Inner Radius let pieInnerRadius = new input.InputNumber('#pieInnerRadius', { min: 0, max: 1, step: 0.1, format: 'n1', valueChanged: (sender) => { if (sender.value < sender.min || sender.value > sender.max) { return; } flexPie.innerRadius = sender.value; } }); // // Pie Animation let pieAnimation = new chartAnimation.ChartAnimation(flexPie, { animationMode: chartAnimation.AnimationMode.All, easing: chartAnimation.Easing.Swing, duration: 400 }); // //Pie Animation Mode let pieAnimationMode = new input.Menu('#pieAnimationMode', { itemsSource: ['すべて', '点', '系列'], selectedValue: 'すべて', itemClicked: (sender) => { pieAnimation.animationMode = sender.selectedIndex; pieAnimation.animate(); updateMenuHeader(pieAnimationMode, '<b>アニメーション</b>: ' + sender.text); } }); updateMenuHeader(pieAnimationMode, '<b>アニメーション</b>: ' + pieAnimationMode.text); // //Pie Reset Data document.querySelector('#pieResetData').addEventListener('click', () => { flexPie.itemsSource = getData(); insertPieIdx = 1; }); // //Pie Add Slice document.querySelector('#pieAddSlice').addEventListener('click', () => { flexPie.itemsSource.push(getRandomData('追加' + insertPieIdx)); insertPieIdx++; }); // //Pie Remove Slice document.querySelector('#pieRemoveSlice').addEventListener('click', () => { if (flexPie.itemsSource.length) { flexPie.itemsSource.pop(); insertPieIdx = insertPieIdx <= 1 ? 1 : insertPieIdx--; } }); // function updateMenuHeader(menu, value) { menu.header = 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 Pie Animation</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 class="row"> <div class="col-sm-12 col-xs-12"> <div id="pieAnimationMode"></div> <div id="pieEasing"></div> <label for="pieDuration">期間:</label> <input id="pieDuration" /> </div> </div> <div class="row"> <div class="col-sm-12 col-xs-12"> <label for="pieInnerRadius">内径:</label> <input id="pieInnerRadius" /> <button id="pieResetData" type="button" class="btn btn-default">データをリセット</button> <button id="pieAddSlice" type="button" class="btn btn-default">セグメントを追加</button> <button id="pieRemoveSlice" type="button" class="btn btn-default">セグメントを削除</button> </div> </div> <div id="chart"></div> </div> </body> </html> // generate some random data import * as wijmo from '@grapecity/wijmo'; // export function getData() { let data = new wijmo.ObservableArray(); // for (let i = 0; i < 5; i++) { data.push(getRandomData('系列' + (i + 1))); } // return data; } // export function getRandomData(id) { return { id: id, y0: getRandomValue(200), y1: getRandomValue(400), y2: getRandomValue(600), y3: getRandomValue(800), y4: getRandomValue(1000) }; } // function getRandomValue(max) { return Math.round(Math.random() * max); } body { margin-bottom: 24px; } .row { margin: 10px -15px; } #pieAnimationMode { width: 220px; } #pieEasing { width: 220px; } #pieDuration, #pieInnerRadius { width: 180px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as chart from '@grapecity/wijmo.chart'; import { ChartAnimation } from '@grapecity/wijmo.chart.animation'; // import { Component, Inject, enableProdMode, ViewChild, NgModule } 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 { WjChartAnimationModule } from '@grapecity/wijmo.angular2.chart.animation'; import { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { @ViewChild('pieAnimation') pieAnimation: ChartAnimation; @ViewChild('pieChart') pieChart: chart.FlexPie; data: wijmo.ObservableArray; palette: string[]; // private _insertPieIdx = 1; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); this.palette = this._getRandomPalette(); } // private _animationMode = 'All'; get animationMode() { return this._animationMode; } set animationMode(value: string) { if (this._animationMode !== value) { this._animationMode = value; this.pieAnimation.animate(); } } // private _easing = 'Swing'; get easing() { return this._easing; } set easing(value: string) { if (this._easing !== value) { this._easing = value; this.pieAnimation.animate(); } } // private _duration = 400; get duration() { return this._duration; } set duration(value: number) { if (this._duration !== value) { this._duration = value; this.pieAnimation.animate(); } } // resetData() { this.data = this.dataService.getData(); this._insertPieIdx = 1; } // addSlice() { this.data.push(this.dataService.getRandomData('追加' + this._insertPieIdx)); this._insertPieIdx++; } // removeSlice() { if (this.data.length) { this.data.pop(); this._insertPieIdx = this._insertPieIdx <= 1 ? 1 : this._insertPieIdx--; } } // private _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]]; } } // @NgModule({ imports: [WjInputModule, WjChartModule, 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 FlexChart Pie Animation</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 class="row"> <div class="col-sm-12 col-xs-12"> <wj-menu [(value)]="animationMode" [header]="'アニメーション'"> <wj-menu-item [value]="'Point'">点</wj-menu-item> <wj-menu-item [value]="'Series'">系列</wj-menu-item> <wj-menu-item [value]="'All'">すべて</wj-menu-item> </wj-menu> <wj-menu [(value)]="easing" [header]="'イージング'"> <wj-menu-item [value]="'Linear'">Linear</wj-menu-item> <wj-menu-item [value]="'Swing'">Swing</wj-menu-item> <wj-menu-item [value]="'EaseOutQuad'">EaseOutQuad</wj-menu-item> <wj-menu-item [value]="'EaseInOutQuad'">EaseInOutQuad</wj-menu-item> <wj-menu-item [value]="'EaseInCubic'">EaseInCubic</wj-menu-item> <wj-menu-item [value]="'EaseOutCubic'">EaseOutCubic</wj-menu-item> <wj-menu-item [value]="'EaseInOutCubic'">EaseInOutCubic</wj-menu-item> <wj-menu-item [value]="'EaseInQuart'">EaseInQuart</wj-menu-item> <wj-menu-item [value]="'EaseOutQuart'">EaseOutQuart</wj-menu-item> <wj-menu-item [value]="'EaseInOutQuart'">EaseInOutQuart</wj-menu-item> <wj-menu-item [value]="'EaseInQuint'">EaseInQuint</wj-menu-item> <wj-menu-item [value]="'EaseOutQuint'"> EaseOutQuint</wj-menu-item> <wj-menu-item [value]="'EaseInOutQuint'">EaseInOutQuint</wj-menu-item> <wj-menu-item [value]="'EaseInSine'">EaseInSine</wj-menu-item> <wj-menu-item [value]="'EaseOutSine'">EaseOutSine</wj-menu-item> <wj-menu-item [value]="'EaseInOutSine'">EaseInOutSine</wj-menu-item> <wj-menu-item [value]="'EaseInExpo'">EaseInExpo</wj-menu-item> <wj-menu-item [value]="'EaseOutExpo'">EaseOutExpo</wj-menu-item> <wj-menu-item [value]="'EaseInOutExpo'">EaseInOutExpo</wj-menu-item> <wj-menu-item [value]="'EaseInCirc'">EaseInCirc</wj-menu-item> <wj-menu-item [value]="'EaseOutCirc'">EaseOutCirc</wj-menu-item> <wj-menu-item [value]="'EaseInOutCirc'">EaseInOutCirc</wj-menu-item> <wj-menu-item [value]="'EaseInBack'">EaseInBack</wj-menu-item> <wj-menu-item [value]="'EaseOutBack'">EaseOutBack</wj-menu-item> <wj-menu-item [value]="'EaseInOutBack'">EaseInOutBack</wj-menu-item> <wj-menu-item [value]="'EaseInBounce'">EaseInBounce</wj-menu-item> <wj-menu-item [value]="'EaseOutBounce'">EaseOutBounce</wj-menu-item> <wj-menu-item [value]="'EaseInOutBounce'">EaseInOutBounce</wj-menu-item> <wj-menu-item [value]="'EaseInElastic'">EaseInElastic</wj-menu-item> <wj-menu-item [value]="'EaseOutElastic'">EaseOutElastic</wj-menu-item> <wj-menu-item [value]="'EaseInOutElastic'">EaseInOutElastic</wj-menu-item> </wj-menu> <label for="pieDuration">期間:</label> <wj-input-number id="pieDuration" [(value)]="duration" [min]="200" [max]="5000" [step]="200" [format]="'n0'"> </wj-input-number> </div> </div> <div class="row"> <div class="col-sm-12 col-xs-12"> <label for="pieInnerRadius">内径:</label> <wj-input-number id="pieInnerRadius" [(value)]="pieChart.innerRadius" [min]="0" [max]="1" [step]="0.1" [format]="'n1'"> </wj-input-number> <button type="button" class="btn btn-default" (click)="resetData()">データをリセット</button> <button type="button" class="btn btn-default" (click)="addSlice()">セグメントを追加</button> <button type="button" class="btn btn-default" (click)="removeSlice()">セグメントを削除</button> </div> </div> <wj-flex-pie #pieChart [bindingName]="'id'" [binding]="'y0'" [innerRadius]="0" [palette]="palette" [itemsSource]="data"> <wj-flex-chart-animation #pieAnimation [animationMode]="animationMode" [easing]="easing" [duration]="duration"> </wj-flex-chart-animation> </wj-flex-pie> </div> import * as wijmo from '@grapecity/wijmo'; import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getData() { let data = new wijmo.ObservableArray(); // for (let i = 0; i < 5; i++) { data.push(this.getRandomData('系列' + (i + 1))); } // return data; } // getRandomData(id: string) { return { id: id, y0: this._getRandomValue(200), y1: this._getRandomValue(400), y2: this._getRandomValue(600), y3: this._getRandomValue(800), y4: this._getRandomValue(1000) }; } // private _getRandomValue(max: number) { return Math.round(Math.random() * max); } } body { margin-bottom: 24px; } .row { margin: 10px -15px; } .wj-menu, .wj-inputnumber, .btn, label { margin-right: 5px; } #pieAnimationMode { width: 220px; } #pieEasing { width: 250px; } #pieDuration, #pieInnerRadius { width: 180px; } 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 chart from '@grapecity/wijmo.chart'; import * as wjChart from '@grapecity/wijmo.react.chart'; import * as wjChartAnimate from '@grapecity/wijmo.react.chart.animation'; import * as wjInput from '@grapecity/wijmo.react.input'; import { getData, getRandomData } from './data'; class App extends React.Component { constructor(props) { super(props); this._insertPieIdx = 1; this.animationInitialized = (ctrl) => { this.animation = ctrl; }; this.animationModeChanged = (e) => { if (e.selectedValue) { this.setState({ animationMode: e.selectedValue }); this.setState({ animationModeText: e.text }); this.animation.animate(); } }; this.easingChanged = (e) => { if (e.selectedValue) { this.setState({ easing: e.selectedValue }); this.animation.animate(); } }; this.durationChanged = (e) => { this.setState({ duration: e.value }); this.animation.animate(); }; this.innerRadiusChanged = (e) => { this.setState({ innerRadius: e.value }); }; // this.resetData = () => { this.setState({ data: getData() }); this._insertPieIdx = 1; }; this.addSlice = () => { this.state.data.push(getRandomData('added' + this._insertPieIdx)); this._insertPieIdx++; }; this.removeSlice = () => { if (this.state.data.length) { this.state.data.pop(); this._insertPieIdx = this._insertPieIdx <= 1 ? 1 : this._insertPieIdx--; } }; // 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: null, animationMode: 'All', animationModeText: 'すべて', easing: 'Swing', duration: 400, innerRadius: 0 }; } render() { return <div className="container-fluid"> <div className="row"> <div className="col-sm-12 col-xs-12"> <wjInput.Menu value={this.state.animationMode} header='アニメーション' itemClicked={this.animationModeChanged}> <wjInput.MenuItem value="Point">点</wjInput.MenuItem> <wjInput.MenuItem value="Series">系列</wjInput.MenuItem> <wjInput.MenuItem value="All">すべて</wjInput.MenuItem> </wjInput.Menu> <wjInput.Menu value={this.state.easing} header='イージング' itemClicked={this.easingChanged}> <wjInput.MenuItem value="Linear">Linear</wjInput.MenuItem> <wjInput.MenuItem value="Swing">Swing</wjInput.MenuItem> <wjInput.MenuItem value="EaseOutQuad">EaseOutQuad</wjInput.MenuItem> <wjInput.MenuItem value="EaseInOutQuad">EaseInOutQuad</wjInput.MenuItem> <wjInput.MenuItem value="EaseInCubic">EaseInCubic</wjInput.MenuItem> <wjInput.MenuItem value="EaseOutCubic">EaseOutCubic</wjInput.MenuItem> <wjInput.MenuItem value="EaseInOutCubic">EaseInOutCubic</wjInput.MenuItem> <wjInput.MenuItem value="EaseInQuart">EaseInQuart</wjInput.MenuItem> <wjInput.MenuItem value="EaseOutQuart">EaseOutQuart</wjInput.MenuItem> <wjInput.MenuItem value="EaseInOutQuart">EaseInOutQuart</wjInput.MenuItem> <wjInput.MenuItem value="EaseInQuint">EaseInQuint</wjInput.MenuItem> <wjInput.MenuItem value="EaseOutQuint"> EaseOutQuint</wjInput.MenuItem> <wjInput.MenuItem value="EaseInOutQuint">EaseInOutQuint</wjInput.MenuItem> <wjInput.MenuItem value="EaseInSine">EaseInSine</wjInput.MenuItem> <wjInput.MenuItem value="EaseOutSine">EaseOutSine</wjInput.MenuItem> <wjInput.MenuItem value="EaseInOutSine">EaseInOutSine</wjInput.MenuItem> <wjInput.MenuItem value="EaseInExpo">EaseInExpo</wjInput.MenuItem> <wjInput.MenuItem value="EaseOutExpo">EaseOutExpo</wjInput.MenuItem> <wjInput.MenuItem value="EaseInOutExpo">EaseInOutExpo</wjInput.MenuItem> <wjInput.MenuItem value="EaseInCirc">EaseInCirc</wjInput.MenuItem> <wjInput.MenuItem value="EaseOutCirc">EaseOutCirc</wjInput.MenuItem> <wjInput.MenuItem value="EaseInOutCirc">EaseInOutCirc</wjInput.MenuItem> <wjInput.MenuItem value="EaseInBack">EaseInBack</wjInput.MenuItem> <wjInput.MenuItem value="EaseOutBack">EaseOutBack</wjInput.MenuItem> <wjInput.MenuItem value="EaseInOutBack">EaseInOutBack</wjInput.MenuItem> <wjInput.MenuItem value="EaseInBounce">EaseInBounce</wjInput.MenuItem> <wjInput.MenuItem value="EaseOutBounce">EaseOutBounce</wjInput.MenuItem> <wjInput.MenuItem value="EaseInOutBounce">EaseInOutBounce</wjInput.MenuItem> <wjInput.MenuItem value="EaseInElastic">EaseInElastic</wjInput.MenuItem> <wjInput.MenuItem value="EaseOutElastic">EaseOutElastic</wjInput.MenuItem> <wjInput.MenuItem value="EaseInOutElastic">EaseInOutElastic</wjInput.MenuItem> </wjInput.Menu> <label htmlFor="pieDuration">期間:</label> <wjInput.InputNumber id="pieDuration" value={this.state.duration} min={200} max={5000} step={200} format="n0" valueChanged={this.durationChanged}> </wjInput.InputNumber> </div> </div> <div className="row"> <div className="col-sm-12 col-xs-12"> <label htmlFor="pieInnerRadius">内径:</label> <wjInput.InputNumber id="pieInnerRadius" value={this.state.innerRadius} min={0} max={1} step={0.1} format="n1" valueChanged={this.innerRadiusChanged}> </wjInput.InputNumber> <button type="button" className="btn btn-default" onClick={this.resetData}>データをリセット</button> <button type="button" className="btn btn-default" onClick={this.addSlice}>セグメントを追加</button> <button type="button" className="btn btn-default" onClick={this.removeSlice}>セグメントを削除</button> </div> </div> <wjChart.FlexPie bindingName="id" binding="y0" innerRadius={this.state.innerRadius} palette={this.state.palette} itemsSource={this.state.data}> <wjChartAnimate.FlexChartAnimation animationMode={this.state.animationMode} easing={this.state.easing} duration={this.state.duration} initialized={this.animationInitialized}> </wjChartAnimate.FlexChartAnimation> </wjChart.FlexPie> </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>AutoComplete</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; } .row { margin: 10px -15px; } .wj-menu, .wj-inputnumber, .btn, label { margin-right: 5px; } #pieAnimationMode { width: 220px; } #pieEasing { width: 250px; } #pieDuration, #pieInnerRadius { width: 180px; } import * as wijmo from '@grapecity/wijmo'; export function getData() { let data = new wijmo.ObservableArray(); // for (let i = 0; i < 5; i++) { data.push(getRandomData('系列' + (i + 1))); } // return data; } // export function getRandomData(id) { return { id: id, y0: _getRandomValue(200), y1: _getRandomValue(400), y2: _getRandomValue(600), y3: _getRandomValue(800), y4: _getRandomValue(1000) }; } // function _getRandomValue(max) { return Math.round(Math.random() * max); } <template> <div class="container-fluid"> <div class="row"> <div class="col-sm-12 col-xs-12"> <wj-menu :value="animationMode" :header="'アニメーション'" :itemClicked="animationModeChanged"> <wj-menu-item :value="'Point'">点</wj-menu-item> <wj-menu-item :value="'Series'">系列</wj-menu-item> <wj-menu-item :value="'All'">すべて</wj-menu-item> </wj-menu> <wj-menu :value="easing" :header="'イージング'" :itemClicked="easingChanged"> <wj-menu-item :value="'Linear'">Linear</wj-menu-item> <wj-menu-item :value="'Swing'">Swing</wj-menu-item> <wj-menu-item :value="'EaseOutQuad'">EaseOutQuad</wj-menu-item> <wj-menu-item :value="'EaseInOutQuad'">EaseInOutQuad</wj-menu-item> <wj-menu-item :value="'EaseInCubic'">EaseInCubic</wj-menu-item> <wj-menu-item :value="'EaseOutCubic'">EaseOutCubic</wj-menu-item> <wj-menu-item :value="'EaseInOutCubic'">EaseInOutCubic</wj-menu-item> <wj-menu-item :value="'EaseInQuart'">EaseInQuart</wj-menu-item> <wj-menu-item :value="'EaseOutQuart'">EaseOutQuart</wj-menu-item> <wj-menu-item :value="'EaseInOutQuart'">EaseInOutQuart</wj-menu-item> <wj-menu-item :value="'EaseInQuint'">EaseInQuint</wj-menu-item> <wj-menu-item :value="'EaseOutQuint'"> EaseOutQuint</wj-menu-item> <wj-menu-item :value="'EaseInOutQuint'">EaseInOutQuint</wj-menu-item> <wj-menu-item :value="'EaseInSine'">EaseInSine</wj-menu-item> <wj-menu-item :value="'EaseOutSine'">EaseOutSine</wj-menu-item> <wj-menu-item :value="'EaseInOutSine'">EaseInOutSine</wj-menu-item> <wj-menu-item :value="'EaseInExpo'">EaseInExpo</wj-menu-item> <wj-menu-item :value="'EaseOutExpo'">EaseOutExpo</wj-menu-item> <wj-menu-item :value="'EaseInOutExpo'">EaseInOutExpo</wj-menu-item> <wj-menu-item :value="'EaseInCirc'">EaseInCirc</wj-menu-item> <wj-menu-item :value="'EaseOutCirc'">EaseOutCirc</wj-menu-item> <wj-menu-item :value="'EaseInOutCirc'">EaseInOutCirc</wj-menu-item> <wj-menu-item :value="'EaseInBack'">EaseInBack</wj-menu-item> <wj-menu-item :value="'EaseOutBack'">EaseOutBack</wj-menu-item> <wj-menu-item :value="'EaseInOutBack'">EaseInOutBack</wj-menu-item> <wj-menu-item :value="'EaseInBounce'">EaseInBounce</wj-menu-item> <wj-menu-item :value="'EaseOutBounce'">EaseOutBounce</wj-menu-item> <wj-menu-item :value="'EaseInOutBounce'">EaseInOutBounce</wj-menu-item> <wj-menu-item :value="'EaseInElastic'">EaseInElastic</wj-menu-item> <wj-menu-item :value="'EaseOutElastic'">EaseOutElastic</wj-menu-item> <wj-menu-item :value="'EaseInOutElastic'">EaseInOutElastic</wj-menu-item> </wj-menu> <label for="pieDuration">期間:</label> <wj-input-number id="pieDuration" :value="duration" :min=200 :max=5000 :step=200 format="n0" :valueChanged="durationChanged"> </wj-input-number> </div> </div> <div class="row"> <div class="col-sm-12 col-xs-12"> <label for="pieInnerRadius">内径:</label> <wj-input-number id="pieInnerRadius" :value="innerRadius" :min=0 :max=1 :step=0.1 format="n1" :valueChanged="innerRadiusChanged"> </wj-input-number> <button type="button" class="btn btn-default" @click="resetData">データをリセット</button> <button type="button" class="btn btn-default" @click="addSlice">セグメントを追加</button> <button type="button" class="btn btn-default" @click="removeSlice">セグメントを削除</button> </div> </div> <wj-flex-pie bindingName="id" binding="y0" :innerRadius="innerRadius" :palette="palette" :itemsSource="data"> <wj-flex-chart-animation :animationMode="animationMode" :easing="easing" :duration="duration" :initialized="animationInitialized"> </wj-flex-chart-animation> </wj-flex-pie> </div> </template> <script> import '@grapecity/wijmo.styles/wijmo.css'; import 'bootstrap.css'; import * as chart from '@grapecity/wijmo.chart'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.input'; import '@grapecity/wijmo.vue2.chart'; import '@grapecity/wijmo.vue2.chart.animation'; import { getData, getRandomData } from './data'; // new Vue({ el: '#app', data: { data: getData(), palette: null, animationMode: 'All', animationModeText: 'すべて', easing: 'Swing', duration: 400, innerRadius: 0 }, methods: { animationInitialized(ctrl) { this.animation = ctrl; }, animationModeChanged(e) { if (e.selectedValue) { this.animationMode = e.selectedValue; this.animationModeText = e.text; this.animation.animate(); } }, easingChanged(e) { if (e.selectedValue) { this.easing = e.selectedValue; this.animation.animate(); } }, durationChanged(e) { this.duration = e.value; this.animation.animate(); }, innerRadiusChanged(e) { this.innerRadius = e.value; }, // resetData() { this.data = getData(); this._insertPieIdx = 1; }, addSlice() { this.data.push(getRandomData('追加' + this._insertPieIdx)); this._insertPieIdx++; }, removeSlice() { if (this.data.length) { this.data.pop(); this._insertPieIdx = this._insertPieIdx <= 1 ? 1 : this._insertPieIdx--; } }, // $_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]]; } }, created() { this.palette = this.$_getRandomPalette(); this._insertPieIdx = 1; } }); </script> <style> body { margin-bottom: 24px; } .row { margin: 10px -15px; } #pieAnimationMode { width: 220px; } #pieEasing { width: 220px; } #pieDuration, #pieInnerRadius { width: 180px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Pie Animation</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> import * as wijmo from '@grapecity/wijmo'; // // generate some random data export function getData() { let data = new wijmo.ObservableArray(); // for (let i = 0; i < 5; i++) { data.push(getRandomData('系列' + (i + 1))); } // return data; } // export function getRandomData(id) { return { id: id, y0: getRandomValue(200), y1: getRandomValue(400), y2: getRandomValue(600), y3: getRandomValue(800), y4: getRandomValue(1000) }; } // function getRandomValue(max) { return Math.round(Math.random() * max); }