チャート:周期的なサンバースト

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

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 * as hierarchical from '@grapecity/wijmo.chart.hierarchical'; import { getData } from './data'; import { PropertiesTile } from './properties-tile'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let data = getData(); data.items.forEach(item => item.value = 1); // add the constant 'value' property to get equal arc angles for all element panels // let mySunburst = new hierarchical.Sunburst('#periodic-sunburst', { palette: chart.Palettes.superhero, legend: { position: chart.Position.None // hide the legend }, innerRadius: 0.3, selectionMode: chart.SelectionMode.Point, dataLabel: { position: chart.PieLabelPosition.Radial, content: '{name}' // the panel should display its name (derived from bindingName property) }, binding: 'value', bindingName: ['name', 'name', 'symbol'], childItemsPath: ['groups', 'items'], itemsSource: data.groups }); // // Initialize the property tile let propTile = new PropertiesTile('#properties-tile'); // // Set up a function to listen for click events on the Sunburst Chart's parent DOM element mySunburst.hostElement.addEventListener('click', e => { // If a panel is clicked, visually select it markSelectedPanel(e.clientX, e.clientY); // Perform a hit test to get a clicked panel's name then use it to set up the info panel via the ViewAdapter propTile.showInfo(mySunburst.hitTest(e.pageX, e.pageY).item); }); // // // ** Logic to handle all chart clicks ** // // Set selected element variables in this outer scope to preserve them let lastSelectedEle; let lastSelectedEleFillColor; // // Keep track of any hidden text elements using an array // This has to be able to store multiple hidden text elements for the case where labels overlap let hiddenTextElements = []; // // Visually marks a panel at the given coordinates as selected function markSelectedPanel(panelX, panelY) { // First, 'unselect' (restore the fill color of) the element that was selected last, if there is one if (lastSelectedEle && lastSelectedEleFillColor) { lastSelectedEle.setAttribute('fill', lastSelectedEleFillColor); } // // Define our selected element and check to see if it's a panel that we can fill let selectedElement = document.elementFromPoint(panelX, panelY); // if (selectedElement && selectedElement.hasAttribute('fill') && selectedElement.tagName === 'path') { // Reset the lastSelectedEle and then change the fill color of the clicked panel let fillColor = selectedElement.getAttribute('fill'); lastSelectedEle = selectedElement; lastSelectedEleFillColor = fillColor; // let color = new wijmo.Color(fillColor); color.a = 1; selectedElement.setAttribute('fill', color.toString()); // while (hiddenTextElements.length > 0) { // if we hid any text elements in the process, reshow them hiddenTextElements.pop().style.display = 'block'; } } else { if (selectedElement && selectedElement.tagName === 'text') { // super hacky way to get the right panel if a data label is clicked selectedElement.style.display = 'none'; // hide the data label hiddenTextElements.push(selectedElement); // keep track of hidden text elements markSelectedPanel(panelX, panelY); // run the method again with the data label hidden } } // return false; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Periodic 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> <!-- The main container where the Sunburst control is rendered --> <div id="periodic-sunburst"> <!-- The main properties container - has individual info panes for each type of info view --> <div id="properties-tile"></div> </div> </body> </html> import * as wijmo from '@grapecity/wijmo'; // export function getData() { // Arrays named by "Group" containing all of the possible "Subgroup" types let METAL_TYPES = ['アルカリ金属', 'アルカリ土類金属', '遷移金属', 'ランタニド', 'アクチニド', '金属'], NON_METAL_TYPES = ['希ガス', 'ハロゲン', '非金属'], OTHER_TYPES = ['メタロイド', 'トランスアクチニド']; // // Separate out the titles that will be on the chart as constants so that they can be // easily changed as options later let METALS_TITLE = '金属', NON_METALS_TITLE = '非金属', OTHERS_TITLE = 'その他'; // // flatten the resulting raw element data array by removing the ID and "un-nesting" the properties object let elementData = getPeriodicTableElements().map(item => item.properties); // // initialize a new object from the Wijmo CollectionView function using our "cleansed" array let elementCv = new wijmo.CollectionView(elementData); // // Do the first tier of grouping // We'll take advantage of the wijmo.collections.PropertyGroupDescription object to sort elements // in the collection view based on which constant array contains their type elementCv.groupDescriptions.push(new wijmo.PropertyGroupDescription('type', (item, prop) => { if (METAL_TYPES.indexOf(item[prop]) > -1) { return METALS_TITLE; } else if (NON_METAL_TYPES.indexOf(item[prop]) > -1) { return NON_METALS_TITLE; } else { return OTHERS_TITLE; } })); // // Do the second tier of grouping // The only consideration we have to make here is that we don't want to duplicate group names. So if // we find another "Metal" or "Nonmetal", we need to prefix it with "Other." Finally, we just want to // go ahead and add the appropriate plural ending to make things sound more natural elementCv.groupDescriptions.push(new wijmo.PropertyGroupDescription('type', (item, prop) => { let value = item[prop], endsWithS = value.length > 0 && value[value.length - 1] == ''; // if (value === METAL_TYPES[METAL_TYPES.length - 1] || value === NON_METAL_TYPES[NON_METAL_TYPES.length - 1]) { return 'その他の' + value + (endsWithS ? '' : ''); } else { return value + (endsWithS ? '' : ''); } })); // // Descriptions of the different subcategories ordered by the type lists above // The metal and nonmetal descriptions have one extra item for the "Others" category let METAL_DESCRIPTIONS = ['光沢、軟らか、高反応性、低融点', '延性、可鍛性、低密度、高融点', '脆い、貧弱な金属、低融点', '高融点、高密度', '可溶性、高反応性', '放射性、常磁性'], NON_METAL_DESCRIPTIONS = ['揮発性、低弾性、絶縁体', '無色、無臭、低化学反応性', '有毒、高反応性、低導体'], OTHER_DESCRIPTIONS = ['金属のような固体、半導体', '放射性、合成元素'], DESCRIPTION_COLLECTION = [NON_METAL_DESCRIPTIONS, METAL_DESCRIPTIONS, OTHER_DESCRIPTIONS]; // create an array containing all of the element description arrays // // Assign a new object property to each "subgroup" Object in the CollectionView based on the arrays above // This property will be stored in the CollectionView items and can be recalled later for display on the chart for (let i = 0; i < elementCv.groups.length; i++) { for (let j = 0; j < elementCv.groups[i].groups.length; j++) { let item = elementCv.groups[i].groups[j]; item.elementProperties = DESCRIPTION_COLLECTION[i][j]; } } // return elementCv; } // function getPeriodicTableElements() { return [ { "id": "1", "properties": { "atomic-number": "1", "element": "水素", "symbol": "H", "atomic-weight": "1.00794", "period": "1", "group": "1", "phase": "gas", "type": "非金属", "ionic-radius": "0.012", "atomic-radius": "0.79", "electronegativity": "2.2", "first-ionization-potential": "13.5984", "density": "8.988E-05", "melting-point-k": "14.175", "boiling-point-k": "20.28", "isotopes": "3", "discoverer": "Cavendish", "year-of-discovery": "1766", "specific-heat-capacity": "14.304", "electron-configuration": "1s1", "display-row": "1", "display-column": "1" } }, { "id": "2", "properties": { "atomic-number": "2", "element": "ヘリウム", "symbol": "He", "atomic-weight": "4.002602", "period": "1", "group": "18", "phase": "gas", "type": "希ガス", "atomic-radius": "0.49", "first-ionization-potential": "24.5874", "density": "0.0001785", "boiling-point-k": "4.22", "isotopes": "5", "discoverer": "Janssen", "year-of-discovery": "1868", "specific-heat-capacity": "5.193", "electron-configuration": "1s2", "display-row": "1", "display-column": "18" } }, { "id": "3", "properties": { "atomic-number": "3", "element": "リチウム", "symbol": "Li", "atomic-weight": "6.941", "period": "2", "group": "1", "phase": "solid", "most-stable-crystal": "bcc", "type": "アルカリ金属", "ionic-radius": "0.76", "atomic-radius": "2.1", "electronegativity": "0.98", "first-ionization-potential": "5.3917", "density": "0.534", "melting-point-k": "453.85", "boiling-point-k": "1615", "isotopes": "5", "discoverer": "Arfvedson", "year-of-discovery": "1817", "specific-heat-capacity": "3.582", "electron-configuration": "[He] 2s1", "display-row": "2", "display-column": "1" } }, { "id": "4", "properties": { "atomic-number": "4", "element": "ベリリウム", "symbol": "Be", "atomic-weight": "9.012182", "period": "2", "group": "2", "phase": "solid", "most-stable-crystal": "hex", "type": "アルカリ土類金属", "ionic-radius": "0.35", "atomic-radius": "1.4", "electronegativity": "1.57", "first-ionization-potential": "9.3227", "density": "1.85", "melting-point-k": "1560.15", "boiling-point-k": "2742", "isotopes": "6", "discoverer": "Vaulquelin", "year-of-discovery": "1798", "specific-heat-capacity": "1.825", "electron-configuration": "[He] 2s2", "display-row": "2", "display-column": "2" } }, { "id": "5", "properties": { "atomic-number": "5", "element": "ホウ素", "symbol": "B", "atomic-weight": "10.811", "period": "2", "group": "13", "phase": "solid", "most-stable-crystal": "rho", "type": "メタロイド", "ionic-radius": "0.23", "atomic-radius": "1.2", "electronegativity": "2.04", "first-ionization-potential": "8.298", "density": "2.34", "melting-point-k": "2573.15", "boiling-point-k": "4200", "isotopes": "6", "discoverer": "Gay-Lussac", "year-of-discovery": "1808", "specific-heat-capacity": "1.026", "electron-configuration": "[He] 2s2 2p1", "display-row": "2", "display-column": "13" } }, { "id": "6", "properties": { "atomic-number": "6", "element": "炭素", "symbol": "C", "atomic-weight": "12.0107", "period": "2", "group": "14", "phase": "solid", "most-stable-crystal": "hex", "type": "非金属", "atomic-radius": "0.91", "electronegativity": "2.55", "first-ionization-potential": "11.2603", "density": "2.267", "melting-point-k": "3948.15", "boiling-point-k": "4300", "isotopes": "7", "discoverer": "Prehistoric", "specific-heat-capacity": "0.709", "electron-configuration": "[He] 2s2 2p2", "display-row": "2", "display-column": "14" } }, { "id": "7", "properties": { "atomic-number": "7", "element": "窒素", "symbol": "N", "atomic-weight": "14.0067", "period": "2", "group": "15", "phase": "gas", "type": "非金属", "ionic-radius": "0.13", "atomic-radius": "0.75", "electronegativity": "3.04", "first-ionization-potential": "14.5341", "density": "0.0012506", "melting-point-k": "63.29", "boiling-point-k": "77.36", "isotopes": "8", "discoverer": "Rutherford", "year-of-discovery": "1772", "specific-heat-capacity": "1.04", "electron-configuration": "[He] 2s2 2p3", "display-row": "2", "display-column": "15" } }, { "id": "8", "properties": { "atomic-number": "8", "element": "酸素", "symbol": "O", "atomic-weight": "15.9994", "period": "2", "group": "16", "phase": "gas", "type": "非金属", "ionic-radius": "1.4", "atomic-radius": "0.65", "electronegativity": "3.44", "first-ionization-potential": "13.6181", "density": "0.001429", "melting-point-k": "50.5", "boiling-point-k": "90.2", "isotopes": "8", "discoverer": "Priestley/Scheele", "year-of-discovery": "1774", "specific-heat-capacity": "0.918", "electron-configuration": "[He] 2s2 2p4", "display-row": "2", "display-column": "16" } }, { "id": "9", "properties": { "atomic-number": "9", "element": "フッ素", "symbol": "F", "atomic-weight": "18.9984032", "period": "2", "group": "17", "phase": "gas", "type": "ハロゲン", "ionic-radius": "1.3", "atomic-radius": "0.57", "electronegativity": "3.98", "first-ionization-potential": "17.4228", "density": "0.001696", "melting-point-k": "53.63", "boiling-point-k": "85.03", "isotopes": "6", "discoverer": "Moissan", "year-of-discovery": "1886", "specific-heat-capacity": "0.824", "electron-configuration": "[He] 2s2 2p5", "display-row": "2", "display-column": "17" } }, { "id": "10", "properties": { "atomic-number": "10", "element": "ネオン", "symbol": "Ne", "atomic-weight": "20.1797", "period": "2", "group": "18", "phase": "gas", "type": "希ガス", "atomic-radius": "0.51", "first-ionization-potential": "21.5645", "density": "0.0008999", "melting-point-k": "24.703", "boiling-point-k": "27.07", "isot