세로 막대형(드릴다운 포함)

샘플은 그룹화와 드릴다운이 있는 세로 막대형 차트를 보여 줍니다.

FlexChart 컨트롤은 드릴 다운 차트의 구현을 지원합니다.

이 세로막대 차트는 FlexChartselectionChanged 이벤트를 사용하여 사용자가 클릭 한 열을 확인한 다음 차트의 itemsSource를 새 데이터로 업데이트하고 새 데이터가 표시되고 있음을 나타내도록 차트의 색상을 변경합니다.

FlexChart 알아보기/flexchart) | Drill-Down 도움말 | FlexChart API 문서

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as core from '@grapecity/wijmo'; import * as chart from '@grapecity/wijmo.chart'; import * as animation from '@grapecity/wijmo.chart.animation'; import { getData, getGroupData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; var barchart; var view; // function init() { view = getData(); barchart = new chart.FlexChart('#chart', { legend: { position: chart.Position.None }, bindingX: 'name', series: [{ binding: 'gdp', name: 'GDP' }], axisX: { title: 'Year', format: 'd' }, axisY: { title: 'GDP (US$ in billions)' }, tooltip: { content: '' }, selectionMode: chart.SelectionMode.Point, selectionChanged: (s) => { if (s.selection) { let point = s.selection.collectionView.currentItem; if (point && point.group && !point.group.isBottomLevel) { showGroup(point.group); } } }, itemsSource: getGroupData(view), palette: ['rgba(45,159,199,1)', 'rgba(236,153,60,1)', 'rgba(137,194,53,1)', 'rgba(227,119,164,1)', 'rgba(166,137,49,1)', 'rgba(166,114,166,1)', 'rgba(208,192,65,1)', 'rgba(227,88,85,1)', 'rgba(104,112,106,1)'] }); // let ani = new animation.ChartAnimation(barchart); } // function showGroup(group) { // update titles updateChartHeader(group); let level = 'level' in group ? group.level + 1 : 0; barchart.axisX.title = core.toHeaderCase(view.groupDescriptions[level].propertyName); // // update the series color (use a different one for each level) let palette = barchart.palette || chart.Palettes.standard; barchart.series[0].style = { fill: palette[level], stroke: palette[level] }; // // update data barchart.itemsSource = getGroupData(group); barchart.selection = null; } // // update the chart header element var header = document.getElementById('header'); function updateChartHeader(group) { let item = group.items[0], path = '', headers = []; // for (let i = 0; i <= group.level; i++) { let prop = view.groupDescriptions[i].propertyName, hdr = core.format('<a href="#{path}">{prop}</a>: {value}', { path: path, prop: core.toHeaderCase(prop), value: item[prop] }); // headers.push(hdr); path += '/' + item[prop]; } // header.innerHTML = headers.length > 0 ? 'IMF estimates GDP(nominal) GDP for ' + headers.join(', ') : 'IMF estimates GDP(nominal) GDP'; } // // handle clicks on chart's header element to navigate back up header.addEventListener('click', function (e) { if (e.target.nodeName === 'A') { e.preventDefault(); // // get the link path let path = e.target.href; path = path.substr(path.lastIndexOf('#') + 1); let paths = path.split('/'); // // find the group that matches the path let src = view; for (let i = 1; i < paths.length; i++) { for (let j = 0; j < src.groups.length; j++) { let group = src.groups[j]; if (group.name == paths[i]) { src = group; break; } } } // show the selected group showGroup(src); } });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo FlexChart Column with Drill-down</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"> <h4 id="header">IMF estimates GDP(nominal) GDP</h4> <div id="chart"></div> </div> </body> </html>
// IMF estimates GDP(nominal) between 2020 and 2023 // https://en.wikipedia.org/wiki/List_of_countries_by_past_and_projected_GDP_(nominal) import * as core from '@grapecity/wijmo'; export function getData() { let data = [ { country: 'United States', continent: 'North America', year: 2020, gdp: 22289 }, { country: 'United States', continent: 'North America', year: 2021, gdp: 23096 }, { country: 'United States', continent: 'North America', year: 2022, gdp: 23874 }, { country: 'United States', continent: 'North America', year: 2023, gdp: 24670 }, { country: 'China', continent: 'Asia', year: 2020, gdp: 15461 }, { country: 'China', continent: 'Asia', year: 2021, gdp: 16768 }, { country: 'China', continent: 'Asia', year: 2022, gdp: 18131 }, { country: 'China', continent: 'Asia', year: 2023, gdp: 19580 }, { country: 'Japan', continent: 'Asia', year: 2020, gdp: 5371 }, { country: 'Japan', continent: 'Asia', year: 2021, gdp: 5522 }, { country: 'Japan', continent: 'Asia', year: 2022, gdp: 5714 }, { country: 'Japan', continent: 'Asia', year: 2023, gdp: 5907 }, { country: 'Gemany', continent: 'Europe', year: 2020, gdp: 4331 }, { country: 'Gemany', continent: 'Europe', year: 2021, gdp: 4523 }, { country: 'Gemany', continent: 'Europe', year: 2022, gdp: 4736 }, { country: 'Gemany', continent: 'Europe', year: 2023, gdp: 4937 }, { country: 'India', continent: 'Asia', year: 2020, gdp: 3258 }, { country: 'India', continent: 'Asia', year: 2021, gdp: 3586 }, { country: 'India', continent: 'Asia', year: 2022, gdp: 3941 }, { country: 'India', continent: 'Asia', year: 2023, gdp: 4329 }, { country: 'France', continent: 'Europe', year: 2020, gdp: 2979 }, { country: 'France', continent: 'Europe', year: 2021, gdp: 3100 }, { country: 'France', continent: 'Europe', year: 2022, gdp: 3234 }, { country: 'France', continent: 'Europe', year: 2023, gdp: 3363 }, { country: 'United Kindom', continent: 'Europe', year: 2020, gdp: 2912 }, { country: 'United Kindom', continent: 'Europe', year: 2021, gdp: 3012 }, { country: 'United Kindom', continent: 'Europe', year: 2022, gdp: 3135 }, { country: 'United Kindom', continent: 'Europe', year: 2023, gdp: 3257 }, { country: 'Italy', continent: 'Europe', year: 2020, gdp: 2191 }, { country: 'Italy', continent: 'Europe', year: 2021, gdp: 2255 }, { country: 'Italy', continent: 'Europe', year: 2022, gdp: 2329 }, { country: 'Italy', continent: 'Europe', year: 2023, gdp: 2395 }, { country: 'Brazil', continent: 'South America', year: 2020, gdp: 2027 }, { country: 'Brazil', continent: 'South America', year: 2021, gdp: 2129 }, { country: 'Brazil', continent: 'South America', year: 2022, gdp: 2237 }, { country: 'Brazil', continent: 'South America', year: 2023, gdp: 2351 }, { country: 'Canada', continent: 'North America', year: 2020, gdp: 1937 }, { country: 'Canada', continent: 'North America', year: 2021, gdp: 2053 }, { country: 'Canada', continent: 'North America', year: 2022, gdp: 2185 }, { country: 'Canada', continent: 'North America', year: 2023, gdp: 2321 }, { country: 'South Korea', continent: 'Asia', year: 2020, gdp: 1781 }, { country: 'South Korea', continent: 'Asia', year: 2021, gdp: 1864 }, { country: 'South Korea', continent: 'Asia', year: 2022, gdp: 1959 }, { country: 'South Korea', continent: 'Asia', year: 2023, gdp: 2054 }, { country: 'Russia', continent: 'Europe', year: 2020, gdp: 1683 }, { country: 'Russia', continent: 'Europe', year: 2021, gdp: 1719 }, { country: 'Russia', continent: 'Europe', year: 2022, gdp: 1757 }, { country: 'Russia', continent: 'Europe', year: 2023, gdp: 1818 }, { country: 'Spain', continent: 'Europe', year: 2020, gdp: 1550 }, { country: 'Spain', continent: 'Europe', year: 2021, gdp: 1616 }, { country: 'Spain', continent: 'Europe', year: 2022, gdp: 1690 }, { country: 'Spain', continent: 'Europe', year: 2023, gdp: 1758 }, { country: 'Australia', continent: 'Oceania', year: 2020, gdp: 1541 }, { country: 'Australia', continent: 'Oceania', year: 2021, gdp: 1615 }, { country: 'Australia', continent: 'Oceania', year: 2022, gdp: 1700 }, { country: 'Australia', continent: 'Oceania', year: 2023, gdp: 1794 }, { country: 'Mexico', continent: 'North America', year: 2020, gdp: 1306 }, { country: 'Mexico', continent: 'North America', year: 2021, gdp: 1376 }, { country: 'Mexico', continent: 'North America', year: 2022, gdp: 1449 }, { country: 'Mexico', continent: 'North America', year: 2023, gdp: 1526 }, { country: 'Indonesia', continent: 'Asia', year: 2020, gdp: 1175 }, { country: 'Indonesia', continent: 'Asia', year: 2021, gdp: 1259 }, { country: 'Indonesia', continent: 'Asia', year: 2022, gdp: 1349 }, { country: 'Indonesia', continent: 'Asia', year: 2023, gdp: 1446 }, { country: 'Netherlands', continent: 'Europe', year: 2020, gdp: 980 }, { country: 'Netherlands', continent: 'Europe', year: 2021, gdp: 1021 }, { country: 'Netherlands', continent: 'Europe', year: 2022, gdp: 1065 }, { country: 'Netherlands', continent: 'Europe', year: 2023, gdp: 1106 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2020, gdp: 815 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2021, gdp: 835 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2022, gdp: 860 }, { country: 'Saudi Arabia', continent: 'Asia', year: 2023, gdp: 889 }, { country: 'Nigeria', continent: 'Africa', year: 2020, gdp: 504 }, { country: 'Nigeria', continent: 'Africa', year: 2021, gdp: 572 }, { country: 'Nigeria', continent: 'Africa', year: 2022, gdp: 649 }, { country: 'Nigeria', continent: 'Africa', year: 2023, gdp: 736 }, { country: 'Argentina', continent: 'South America', year: 2020, gdp: 444 }, { country: 'Argentina', continent: 'South America', year: 2021, gdp: 476 }, { country: 'Argentina', continent: 'South America', year: 2022, gdp: 508 }, { country: 'Argentina', continent: 'South America', year: 2023, gdp: 540 }, { country: 'South Africa', continent: 'South America', year: 2020, gdp: 403 }, { country: 'South Africa', continent: 'South America', year: 2021, gdp: 419 }, { country: 'South Africa', continent: 'South America', year: 2022, gdp: 438 }, { country: 'South Africa', continent: 'South America', year: 2023, gdp: 456 }, { country: 'Colombia', continent: 'South America', year: 2020, gdp: 367 }, { country: 'Colombia', continent: 'South America', year: 2021, gdp: 382 }, { country: 'Colombia', continent: 'South America', year: 2022, gdp: 400 }, { country: 'Colombia', continent: 'South America', year: 2023, gdp: 422 }, { country: 'Chile', continent: 'South America', year: 2020, gdp: 352 }, { country: 'Chile', continent: 'South America', year: 2021, gdp: 378 }, { country: 'Chile', continent: 'South America', year: 2022, gdp: 404 }, { country: 'Chile', continent: 'South America', year: 2023, gdp: 433 }, { country: 'Egypt', continent: 'Africa', year: 2020, gdp: 339 }, { country: 'Egypt', continent: 'Africa', year: 2021, gdp: 359 }, { country: 'Egypt', continent: 'Africa', year: 2022, gdp: 380 }, { country: 'Egypt', continent: 'Africa', year: 2023, gdp: 414 }, { country: 'Peru', continent: 'South America', year: 2020, gdp: 252 }, { country: 'Peru', continent: 'South America', year: 2021, gdp: 266 }, { country: 'Peru', continent: 'South America', year: 2022, gdp: 281 }, { country: 'Peru', continent: 'South America', year: 2023, gdp: 297 }, { country: 'New Zealand', continent: 'Oceania', year: 2020, gdp: 227 }, { country: 'New Zealand', continent: 'Oceania', year: 2021, gdp: 242 }, { country: 'New Zealand', continent: 'Oceania', year: 2022, gdp: 257 }, { country: 'New Zealand', continent: 'Oceania', year: 2023, gdp: 272 }, { country: 'Algeria', continent: 'Africa', year: 2020, gdp: 207 }, { country: 'Algeria', continent: 'Africa', year: 2021, gdp: 212 }, { country: 'Algeria', continent: 'Africa', year: 2022, gdp: 218 }, { country: 'Algeria', continent: 'Africa', year: 2023, gdp: 228 } ]; // return new core.CollectionView(data, { groupDescriptions: ['year', 'continent', 'country'] }); } // // get the group data for a selected point export function getGroupData(group) { // get items for this group, aggregate by sales let arr = []; // group.groups.forEach(g => { arr.push({ name: g.name, gdp: g.getAggregate(core.Aggregate.Sum, 'gdp'), group: g }); }); // // return a new collection view sorted by sales return new core.CollectionView(arr, { sortDescriptions: [ new core.SortDescription('gdp', false) ] }); }
body { margin-bottom: 24px; } .container h4 { text-align: center; } .container a { cursor: pointer; } .container .wj-flexchart { border: none; } .container { border: 1px solid #e4e4e4; }
(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', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.chart.map': 'npm:@grapecity/wijmo.chart.map/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.rest': 'npm:@grapecity/wijmo.rest/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', '@grapecity/wijmo.barcode': 'npm:@grapecity/wijmo.barcode/index.js', '@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js', '@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js', '@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/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);