チャート:パレート図

パレート図は棒グラフと折れ線グラフで構成され、各値が降順の棒で、累計値が折れ線で表示されます。

左の縦軸には、発生頻度、コスト、または他の重要な測定単位を含めることができます。右の縦軸は、特定の測定単位の発生、コスト、または合計の合計累積パーセンテージです。

パレート図は、出現の大部分を占める項目を特定し、優先順位を付けることができるようにします。

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjChart from '@grapecity/wijmo.chart'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create secondary Y axis for cumulative sales values let axisY2 = new wjChart.Axis(); axisY2.position = wjChart.Position.Right; axisY2.title = '累計売上'; axisY2.format = 'p0'; axisY2.min = 0; axisY2.axisLine = true; // // create the Pareto chart let theChart = new wjChart.FlexChart('#theChart', { itemsSource: getData(), chartType: 'Column', bindingX: 'make', axisY: { format: 'n0', title: '売上(千)', axisLine: true }, axisX: { labelAngle: -90 }, legend: { position: 'None' }, series: [ { binding: 'sales', name: '売上(千)' }, { binding: 'cumSales', name: '累計売上', chartType: 'Line', axisY: axisY2, style: { stroke: 'orange', strokeWidth: 4 } } ], palette: getRandomPalette() }); // // change the data to update the chart document.querySelector('#btnUpdate').addEventListener('click', () => { let view = theChart.collectionView; // view.deferUpdate(() => { view.items.forEach((item) => { item.sales += (Math.random() - .5) * .5 * item.sales; }); }); }); } // function 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]]; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Pareto</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="form-group"> <button id="btnUpdate" class="btn btn-default">更新</button> </div> <div id="theChart"></div> </div> </body> </html> import * as wijmo from '@grapecity/wijmo'; // get the chart data export function getData() { // some raw data let data = [ { make: 'フォルクスワーゲン', sales: 2532435 }, { make: 'トヨタ', sales: 2338453 }, { make: 'ルノー・日産', sales: 2336543 }, { make: 'GM', sales: 2252543 }, { make: '現代・起亜', sales: 1553547 }, { make: 'フォード', sales: 1521153 }, { make: 'スズキ', sales: 739123 }, { make: 'PSA', sales: 682121 }, { make: 'ダイムラー', sales: 440234 }, { make: 'BMW', sales: 586121 }, { make: '吉利', sales: 410353 }, { make: 'マツダ', sales: 389243 }, { make: '長安', sales: 389323 }, { make: 'スバル', sales: 230221 }, { make: 'タタ', sales: 242123 } ]; // // created sorted view let view = new wijmo.CollectionView(data); view.sortDescriptions.push(new wijmo.SortDescription('sales', false)); // // add cumulative sales updateCumSales(view); // // update cumulative sales when the data changes view.collectionChanged.addHandler(() => updateCumSales(view)); // // done return view; } // // update cumulative sales function updateCumSales(view) { let totalSales = view.getAggregate(wijmo.Aggregate.Sum, 'sales'), cumSales = 0; // view.items.forEach((item) => { cumSales += item.sales; item.cumSales = cumSales / totalSales; }); } .wj-flexchart { margin: 0 auto; border: none; } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, Inject, enableProdMode, ViewChild, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { WjChartModule } from '@grapecity/wijmo.angular2.chart'; import { DataService, TDataItem } from './app.data'; import * as wjCore from '@grapecity/wijmo'; import * as wjChart from '@grapecity/wijmo.chart'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: wjCore.CollectionView; palette: any; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); this.palette = this._getRandomPalette(); } // updateData() { let view = this.data; // view.deferUpdate(() => { view.items.forEach((item: TDataItem) => { item.sales += (Math.random() - .5) * .5 * item.sales; }); }); } // private _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: [FormsModule, WjChartModule, 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 Pareto</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="form-group"> <button id="btnUpdate" class="btn btn-default" (click)="updateData()">更新</button> </div> <wj-flex-chart [itemsSource]="data" chartType="Column" bindingX="make" [palette]="palette"> <wj-flex-chart-axis wjProperty="axisY" format="n0" title="売上(千)" [axisLine]="true"> </wj-flex-chart-axis> <wj-flex-chart-axis wjProperty="axisX" [labelAngle]="-90"></wj-flex-chart-axis> <wj-flex-chart-legend position="None"></wj-flex-chart-legend> <wj-flex-chart-series binding="sales" name="売上(千)"></wj-flex-chart-series> <wj-flex-chart-series binding="cumSales" name="累計売上" chartType="Line" [style]="{'stroke':'orange', 'strokeWidth': 4}"> <wj-flex-chart-axis wjProperty="axisY" position="Right" title="累計売上" format="p0" [min]="0" [axisLine]="true"></wj-flex-chart-axis> </wj-flex-chart-series> </wj-flex-chart> </div> import { Injectable } from '@angular/core'; import * as wijmo from '@grapecity/wijmo'; // export type TDataItem = { make: string; sales: number; cumSales?: number; } // @Injectable() export class DataService { getData() { // some raw data let data: TDataItem[] = [ { make: 'フォルクスワーゲン', sales: 2532435 }, { make: 'トヨタ', sales: 2338453 }, { make: 'ルノー・日産', sales: 2336543 }, { make: 'GM', sales: 2252543 }, { make: '現代・起亜', sales: 1553547 }, { make: 'フォード', sales: 1521153 }, { make: 'スズキ', sales: 739123 }, { make: 'PSA', sales: 682121 }, { make: 'ダイムラー', sales: 440234 }, { make: 'BMW', sales: 586121 }, { make: '吉利', sales: 410353 }, { make: 'マツダ', sales: 389243 }, { make: '長安', sales: 389323 }, { make: 'スバル', sales: 230221 }, { make: 'タタ', sales: 242123 } ]; // // created sorted view let view = new wijmo.CollectionView(data); view.sortDescriptions.push(new wijmo.SortDescription('sales', false)); // // add cumulative sales this._updateCumSales(view); // // update cumulative sales when the data changes view.collectionChanged.addHandler(() => this._updateCumSales(view)); // // done return view; } // // update cumulative sales private _updateCumSales(view: wijmo.CollectionView) { let totalSales = view.getAggregate(wijmo.Aggregate.Sum, 'sales'), cumSales = 0; // view.items.forEach((item) => { cumSales += item.sales; item.cumSales = cumSales / totalSales; }); } } .wj-flexchart { margin: 0 auto; border: none; } 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 chart from '@grapecity/wijmo.chart'; import * as wjChart from '@grapecity/wijmo.react.chart'; import { getData } from './data'; class App extends React.Component { constructor(props) { super(props); this.updateData = () => { let view = this.state.data; // view.deferUpdate(() => { view.items.forEach(item => { item.sales += (Math.random() - .5) * .5 * item.sales; }); }); }; this.state = { data: getData(), palette: (() => { // Get random palette 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]]; })() }; } render() { return <div className="container-fluid"> <div className="form-group"> <button id="btnUpdate" className="btn btn-default" onClick={this.updateData}>更新</button> </div> <wjChart.FlexChart itemsSource={this.state.data} palette={this.state.palette} chartType="Column" bindingX="make"> <wjChart.FlexChartAxis wjProperty="axisY" format="n0" title="売上(千)" axisLine={true}> </wjChart.FlexChartAxis> <wjChart.FlexChartAxis wjProperty="axisX" labelAngle={-90}></wjChart.FlexChartAxis> <wjChart.FlexChartLegend position="None"></wjChart.FlexChartLegend> <wjChart.FlexChartSeries binding="sales" name="売上(千)"></wjChart.FlexChartSeries> <wjChart.FlexChartSeries binding="cumSales" name="累計売上" chartType="Line" style={{ 'stroke': 'orange', 'strokeWidth': 4 }}> <wjChart.FlexChartAxis wjProperty="axisY" position="Right" title="累計売上" format="p0" min={0} axisLine={true}> </wjChart.FlexChartAxis> </wjChart.FlexChartSeries> </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 FlexChart Pareto</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> .wj-flexchart { margin: 0 auto; border: none; } body { margin-bottom: 24pt; } import * as wijmo from '@grapecity/wijmo'; export function getData() { // some raw data let data = [ { make: 'フォルクスワーゲン', sales: 2532435 }, { make: 'トヨタ', sales: 2338453 }, { make: 'ルノー・日産', sales: 2336543 }, { make: 'GM', sales: 2252543 }, { make: '現代・起亜', sales: 1553547 }, { make: 'フォード', sales: 1521153 }, { make: 'スズキ', sales: 739123 }, { make: 'PSA', sales: 682121 }, { make: 'ダイムラー', sales: 440234 }, { make: 'BMW', sales: 586121 }, { make: '吉利', sales: 410353 }, { make: 'マツダ', sales: 389243 }, { make: '長安', sales: 389323 }, { make: 'スバル', sales: 230221 }, { make: 'タタ', sales: 242123 } ]; // // created sorted view let view = new wijmo.CollectionView(data); view.sortDescriptions.push(new wijmo.SortDescription('sales', false)); // // add cumulative sales _updateCumSales(view); // // update cumulative sales when the data changes view.collectionChanged.addHandler(() => _updateCumSales(view)); // // done return view; } // // update cumulative sales function _updateCumSales(view) { let totalSales = view.getAggregate(wijmo.Aggregate.Sum, 'sales'), cumSales = 0; // view.items.forEach((item) => { cumSales += item.sales; item.cumSales = cumSales / totalSales; }); } <template> <div class="container-fluid"> <div class="form-group"> <button id="btnUpdate" class="btn btn-default" @click="updateData">更新</button> </div> <wj-flex-chart :itemsSource="data" chartType="Column" bindingX="make" :palette="palette"> <wj-flex-chart-axis wjProperty="axisY" format="n0" title="売上(千)" :axisLine=true> </wj-flex-chart-axis> <wj-flex-chart-axis wjProperty="axisX" :labelAngle=-90></wj-flex-chart-axis> <wj-flex-chart-legend position="None"></wj-flex-chart-legend> <wj-flex-chart-series binding="sales" name="売上(千)"></wj-flex-chart-series> <wj-flex-chart-series binding="cumSales" name="累計売上" chartType="Line" :style="{'stroke':'orange', 'strokeWidth': 4}"> <wj-flex-chart-axis wjProperty="axisY" position="Right" title="累計売上" format="p0" :min=0 :axisLine=true></wj-flex-chart-axis> </wj-flex-chart-series> </wj-flex-chart> </div> </template> <script> import '@grapecity/wijmo.styles/wijmo.css'; import 'bootstrap.css'; import Vue from 'vue'; import * as chart from '@grapecity/wijmo.chart'; import '@grapecity/wijmo.vue2.chart'; import { getData } from './data'; // new Vue({ el: '#app', data: { data: getData(), palette: (() => { // Get random palette 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]]; })() }, methods: { updateData() { let view = this.data; // view.deferUpdate(() => { view.items.forEach(item => { item.sales += (Math.random() - .5) * .5 * item.sales; }); }); } } }); </script> <style> .container-fluid .wj-flexchart { margin: 0 auto; border: none; } body { margin-bottom: 24pt; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Pareto</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'; // export function getData() { // some raw data let data = [ { make: 'フォルクスワーゲン', sales: 2532435 }, { make: 'トヨタ', sales: 2338453 }, { make: 'ルノー・日産', sales: 2336543 }, { make: 'GM', sales: 2252543 }, { make: '現代・起亜', sales: 1553547 }, { make: 'フォード', sales: 1521153 }, { make: 'スズキ', sales: 739123 }, { make: 'PSA', sales: 682121 }, { make: 'ダイムラー', sales: 440234 }, { make: 'BMW', sales: 586121 }, { make: '吉利', sales: 410353 }, { make: 'マツダ', sales: 389243 }, { make: '長安', sales: 389323 }, { make: 'スバル', sales: 230221 }, { make: 'タタ', sales: 242123 } ]; // // created sorted view let view = new wijmo.CollectionView(data); view.sortDescriptions.push(new wijmo.SortDescription('sales', false)); // // add cumulative sales updateCumSales(view); // // update cumulative sales when the data changes view.collectionChanged.addHandler(() => updateCumSales(view)); // // done return view; } // // update cumulative sales function updateCumSales(view) { let totalSales = view.getAggregate(wijmo.Aggregate.Sum, 'sales'), cumSales = 0; // view.items.forEach(item => { cumSales += item.sales; item.cumSales = cumSales / totalSales; }); }