サンバースト

サンプルは、不完全な子データ(ギザギザの円)を使ったサンバーストチャートを示しています。

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as hierarchical from '@grapecity/wijmo.chart.hierarchical'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { var sunburst = new hierarchical.Sunburst('#chart', { binding: 'value', bindingName: 'year, quarter, month', childItemsPath: 'items', itemsSource: getData(), dataLabel: { position: 'Center', content: '{name}' }, isAnimated: true, selectionMode: 'Point', selectedItemPosition: 'Top', selectedItemOffset: 0.3, palette: ['rgba(92,184,92,1)', 'rgba(240,173,78,1)', 'rgba(91,192,222,1)', 'rgba(217,83,79,1)', 'rgba(159,91,222,1)', 'rgba(70,219,140,1)', 'rgba(182,184,110,1)', 'rgba(78,93,108,1)', 'rgba(43,62,75,1)'] }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Sunburst</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> // Get random data. export function getData() { let data = [], times = [['1月', '2月', '3月'], ['4月', '5月', '6月'], ['7月', '8月', '9月'], ['10月', '11月', '12月']], years = [], year = new Date().getFullYear(), yearLen = Math.max(Math.round(Math.abs(5 - Math.random() * 10)), 3), quarterAdded = false; // for (let i = yearLen; i > 0; i--) { years.push(year - i); } // years.forEach((y, yIndex) => { let addQuarter = Math.random() > 0.5; if (!quarterAdded && yIndex === years.length - 1) { addQuarter = true; } let year = { year: y.toString(), }; if (addQuarter) { let quarters = []; quarterAdded = true; times.forEach((q, qIndex) => { let addMonth = Math.random() > 0.5, quarter = { quarter: 'Q' + (qIndex + 1) }; if (addMonth) { let months = []; q.forEach(m => { months.push({ month: m, value: Math.round(Math.random() * 100) }); }); quarter.items = months; } else { quarter.value = Math.round(Math.random() * 400); } quarters.push(quarter); }); year.items = quarters; } else { year.value = Math.round(Math.random() * 1200); } data.push(year); }); // return data; } body { margin-bottom: 24px; } .wj-flexchart { height: 500px; } 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 { WjChartHierarchicalModule } from '@grapecity/wijmo.angular2.chart.hierarchical'; 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(); } } // @NgModule({ imports: [WjChartModule, WjChartHierarchicalModule, 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 Sunburst</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-sunburst [binding]="'value'" [bindingName]="'year, quarter, month'" [childItemsPath]="'items'" [itemsSource]="data" [isAnimated]="true" [selectionMode]="'Point'" [selectedItemPosition]="'Top'" [selectedItemOffset]="0.3" [palette]="['rgba(92,184,92,1)', 'rgba(240,173,78,1)', 'rgba(91,192,222,1)', 'rgba(217,83,79,1)', 'rgba(159,91,222,1)', 'rgba(70,219,140,1)', 'rgba(182,184,110,1)', 'rgba(78,93,108,1)', 'rgba(43,62,75,1)']"> <wj-flex-pie-data-label [position]="'Center'" [content]="'{name}'"></wj-flex-pie-data-label> </wj-sunburst> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { // Get random data getData() { let data: any[] = [], times = [['1月', '2月', '3月'], ['4月', '5月', '6月'], ['7月', '8月', '9月'], ['10月', '11月', '12月']], years = [], year = new Date().getFullYear(), yearLen = Math.max(Math.round(Math.abs(5 - Math.random() * 10)), 3), quarterAdded = false; // for (let i = yearLen; i > 0; i--) { years.push(year - i); } // years.forEach((y, yIndex) => { let addQuarter = Math.random() > 0.5; if (!quarterAdded && yIndex === years.length - 1) { addQuarter = true; } let year: any = { year: y.toString(), }; if (addQuarter) { let quarters: any[] = []; quarterAdded = true; times.forEach((q, qIndex) => { let addMonth = Math.random() > 0.5, quarter: any = { quarter: 'Q' + (qIndex + 1) }; if (addMonth) { let months: any[] = []; q.forEach(m => { months.push({ month: m, value: Math.round(Math.random() * 100) }); }); quarter.items = months; } else { quarter.value = Math.round(Math.random() * 400); } quarters.push(quarter); }); year.items = quarters; } else { year.value = Math.round(Math.random() * 1200) } data.push(year); }); // return data; } } body { margin-bottom: 24px; } .wj-flexchart { height: 500px; } 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 wjHierarchical from '@grapecity/wijmo.react.chart.hierarchical'; import { getData } from './data'; // class App extends React.Component { constructor(props) { super(props); this.initSunburst = (sender) => { sender.dataLabel.content = "{name}"; }; this.state = { data: getData(), palette: ['rgba(92,184,92,1)', 'rgba(240,173,78,1)', 'rgba(91,192,222,1)', 'rgba(217,83,79,1)', 'rgba(159,91,222,1)', 'rgba(70,219,140,1)', 'rgba(182,184,110,1)', 'rgba(78,93,108,1)', 'rgba(43,62,75,1)'] }; } render() { return <div className="container-fluid"> <wjHierarchical.Sunburst binding="value" bindingName="year, quarter, month" childItemsPath="items" isAnimated={true} selectionMode="Point" selectedItemPosition="Top" selectedItemOffset={0.3} initialized={this.initSunburst} itemsSource={this.state.data} palette={this.state.palette}> <wjChart.FlexPieDataLabel position="Center"></wjChart.FlexPieDataLabel> </wjHierarchical.Sunburst> </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; } .wj-flexchart { height: 500px; } export function getData() { let data = [], times = [['1月', '2月', '3月'], ['4月', '5月', '6月'], ['7月', '8月', '9月'], ['10月', '11月', '12月']], years = [], year = new Date().getFullYear(), yearLen = Math.max(Math.round(Math.abs(5 - Math.random() * 10)), 3), quarterAdded = false; // for (let i = yearLen; i > 0; i--) { years.push(year - i); } // years.forEach((y, yIndex) => { let addQuarter = Math.random() > 0.5; if (!quarterAdded && yIndex === years.length - 1) { addQuarter = true; } let year = { year: y.toString(), }; if (addQuarter) { let quarters = []; quarterAdded = true; times.forEach((q, qIndex) => { let addMonth = Math.random() > 0.5, quarter = { quarter: 'Q' + (qIndex + 1) }; if (addMonth) { let months = []; q.forEach(m => { months.push({ month: m, value: Math.round(Math.random() * 100) }); }); quarter.items = months; } else { quarter.value = Math.round(Math.random() * 400); } quarters.push(quarter); }); year.items = quarters; } else { year.value = Math.round(Math.random() * 1200); } data.push(year); }); // return data; } <template> <div class="container-fluid"> <wj-sunburst binding="value" bindingName="year, quarter, month" childItemsPath="items" :itemsSource="data" :isAnimated=true selectionMode="Point" selectedItemPosition="Top" :selectedItemOffset=0.3 :palette="['rgba(92,184,92,1)', 'rgba(240,173,78,1)', 'rgba(91,192,222,1)', 'rgba(217,83,79,1)', 'rgba(159,91,222,1)', 'rgba(70,219,140,1)', 'rgba(182,184,110,1)', 'rgba(78,93,108,1)', 'rgba(43,62,75,1)']"> <wj-flex-pie-data-label position="Center" content="{name}"></wj-flex-pie-data-label> </wj-sunburst> </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.hierarchical'; import { getData } from './data'; // new Vue({ el: '#app', data: { data: getData() } }); </script> <style> body { margin-bottom: 24px; } .container-fluid .wj-flexchart { height: 500px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Sunburst</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> // Get random data. export function getData() { let data = [], times = [['1月', '2月', '3月'], ['4月', '5月', '6月'], ['7月', '8月', '9月'], ['10月', '11月', '12月']], years = [], year = new Date().getFullYear(), yearLen = Math.max(Math.round(Math.abs(5 - Math.random() * 10)), 3), quarterAdded = false; // for (let i = yearLen; i > 0; i--) { years.push(year - i); } // years.forEach((y, yIndex) => { let addQuarter = Math.random() > 0.5; if (!quarterAdded && yIndex === years.length - 1) { addQuarter = true; } let year = { year: y.toString(), }; if (addQuarter) { let quarters = []; quarterAdded = true; times.forEach((q, qIndex) => { let addMonth = Math.random() > 0.5, quarter = { quarter: 'Q' + (qIndex + 1) }; if (addMonth) { let months = []; q.forEach(m => { months.push({ month: m, value: Math.round(Math.random() * 100) }); }); quarter.items = months; } else { quarter.value = Math.round(Math.random() * 400); } quarters.push(quarter); }); year.items = quarters; } else { year.value = Math.round(Math.random() * 1200) } data.push(year); }); // return data; }