파레토

Vilfredo Pareto의 이름을 따서 명명된 파레토 차트에는 막대와 꺾은선형 그래프가 모두 포함됩니다. 개별 값은 막대를 통해 내림차순으로 표시되고, 누적 총계는 선으로 표시됩니다.

왼쪽 세로 축에는 발생 빈도, 비용 또는 다른 중요한 측정 단위가 포함될 수 있습니다. 오른쪽 세로 축은 총 발생 횟수, 비용 또는 특정 측정 단위 총계의 누적 백분율입니다.

파레토 차트는 대부분의 발생을 설명하는 항목을 식별하는데 도움이되므로 우선 순위를 지정할 수 있습니다.

FlexChart 알아보기/flexchart) | FlexChart API Reference

import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import './styles.css'; import { isArray } from '@mescius/wijmo'; import { FlexChart, Axis, Position, Palettes } from '@mescius/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 Axis(); axisY2.position = Position.Right; axisY2.title = 'Cumulative Sales'; axisY2.format = 'p0'; axisY2.min = 0; axisY2.axisLine = true; // // create the Pareto chart let theChart = new FlexChart('#theChart', { itemsSource: getData(), chartType: 'Column', bindingX: 'make', axisY: { format: 'n0,', title: 'Sales (thousands)', axisLine: true }, axisX: { labelAngle: -90 }, legend: { position: 'None' }, series: [ { binding: 'sales', name: 'Sales (thousands)' }, { binding: 'cumSales', name: 'Cumulative Sales', 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.keys(Palettes).filter(prop => isArray(Palettes[prop])); let rand = Math.floor(Math.random() * palettes.length); // return Palettes[palettes[rand]]; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo FlexChart Pareto</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></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">Update</button> </div> <div id="theChart"></div> </div> </body> </html>
import * as wijmo from '@mescius/wijmo'; // get the chart data export function getData() { // some raw data let data = [ { make: 'Vokswagen', sales: 2532435 }, { make: 'Toyota', sales: 2338453 }, { make: 'Renault-Nissan', sales: 2336543 }, { make: 'GM', sales: 2252543 }, { make: 'Hyundai-Kia', sales: 1553547 }, { make: 'Ford', sales: 1521153 }, { make: 'Suzuki', sales: 739123 }, { make: 'PSA', sales: 682121 }, { make: 'Daimler', sales: 440234 }, { make: 'BMW Group', sales: 586121 }, { make: 'Geely', sales: 410353 }, { make: 'Mazda', sales: 389243 }, { make: 'Chang\'an', sales: 389323 }, { make: 'Subaru', sales: 230221 }, { make: 'Tata Group', 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; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);