First, what is the Sun map
The Sun chart is a new chart in Excel 2016. Some are similar to pie charts, and the advantage of pie charts is that they can show a percentage. But pie charts can only display single-level data. The Sun chart is used to represent the ratio of multi-level data. The Sun chart is displayed in a hierarchical manner and is ideal for displaying hierarchical data. The scale of each level in the hierarchy is represented by 1 rings, and the closer to the origin represents the higher the ring level, the most inner circle represents the top-level structure, and then a layer-by-layer view of the data.
In a simple example, let's take a first look at the glamour of the sun chart.
Quarter |
Month |
Week |
Sales |
Q1 |
January |
|
29 |
February |
First week |
63 |
Second week |
54 |
Third week |
91 |
Week Four |
78 |
March |
|
49 |
Q2 |
April |
|
66 |
May |
|
110 |
June |
|
42 |
Q3 |
July |
|
19 |
August |
|
73 |
September |
|
109 |
Q4 |
October |
|
32 |
November |
|
112 |
December |
|
99 |
Table 1 Sales statistics of a product
650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/10730/201703/10730-20170310092656297-279953349.png "/>
Figure 1 Sales by the Sun chart
From table 1 we can see that it is a hierarchical data, the 1th level is the quarter, the 2nd level is the month, and the 3rd level is the week. Figure 1 is a Sun chart drawn in Excel based on table 1. The inner layer shows the 1th quarter, the outer ring shows the 2nd month, and the outermost ring shows the 3rd level. Each percentage shown is calculated based on its corresponding sales.
Second, a simple example
After we understand the sun map, in some scenarios we want to use the sun chart in our own system. The JS control provided in WIJMO allows us to use the Sun map on the web's pure front end. If you want to be in. NET platform to understand the Flexchart in ComponentOne. With a simple example below, there is a preliminary understanding of how to use the sun chart.
HTML File:
1. Introduction of Wijmo CSS and JS
<!--Styles--<link href= "Styles/vendor/wijmo.min.css" rel= "stylesheet"/> <link href= "styles/app.c SS "rel=" stylesheet "/> <!--Wijmo-to <script src=" Scripts/vendor/wijmo.min.js "type=" Text/javascript "& gt;</script> <script src= "scripts/vendor/wijmo.chart.min.js" type= "Text/javascript" ></script> & Lt;script src= "Scripts/vendor/wijmo.chart.hierarchical.min.js" type= "Text/javascript" > </script>
2. Define a div
This div user displays the Sun chart.
<div id= "Introchart" ></div>
3. Introduce a custom JS file
<script src= "Scripts/app.js" ></script><script src= "Scripts/sunburst.js" ></script>
App.js :
Generate Data var app = { getdata: function () { var data = [], months = [[' Jan ', ' Feb ', ' Mar '], [' Apr ', ' May ', ' June '], [' Jul ', ', ' Sep '], [' Oct ', ' Nov ', ' Dec ']], years = [2014, 2015, 2016]; years.foreach (function (y, i) { months.foreach (function (Q,&NBSP;IDX) { var quar = ' Q ' + (idx + 1); &nBsp;q.foreach (function (m) { data.push ({ year: Y.tostring (), quarter: quar, month: m, value: math.round (Math.random () * 100) }) ; }); }); }); return data; },};
Created an app class that contains a GetData method for generating a multilevel data. Its levels are year, quarter, and month, respectively.
Sunburst.js :
(function (Wijmo, app) { ' use strict '; // Create the control var chart = new wijmo.chart.hierarchical.sunburst (' #introChart '); // Initialize the Sun- chart.beginupdate (); / / Sun Chart contains the merit attribute name chart.binding = ' value '; // Set the name of a sub-project in the hierarchical data for generating children in a sun chart chart.bindingname = [' year ', ' quarter ', ' Month ']; // set the data source chart.itemssource = app.getdata (); // Set the location of the data display chart.dataLabel.position = wijmo.chart.pielabelposition.center; // Setting the contents of the data display chart.datalabel.content = ' {name} '; // set selection mode chart.selectionmode = ' Point '; chart.endupdate ();}) (Wijmo, app);
Creates a Sunburst object based on the DIV's ID, sets the data source, and related properties. The data source is provided through App.getdata ().
The following is the result of the program running.
650) this.width=650; "style=" Margin-right:auto;margin-left:auto; "src=" http://images2015.cnblogs.com/blog/10730/ 201703/10730-20170310090533781-1036128425.png "/>
Figure 2 Run Results
Third, the periodic table of elements is realized by the "Sunrise map"
With the above knowledge reserve, we can do a little more complex implementation. Below we use the "sun map" to implement the periodic table of elements. When we were in high school, we should have studied the periodic table, which is a form similar to the following. This table shows more information about the elements, but does not show the information that the elements classify. We're going to do it with the sun map, and we're going to improve on that.
650) this.width=650; "Width=" 636 "height=" 531 "style=" Margin-right:auto;margin-left:auto; "src="/HTTP/ Images2015.cnblogs.com/blog/10730/201703/10730-20170310091036219-993330047.jpg "/>
Fig. 3 Periodic Table of elements
HTML File:
Similar to the simple example, you need to introduce WIJMO-related styles and JS files.
1. Introduce a custom JS file
<script src= "Scripts/dataloader.js" ></script><script src= "Scripts/app.js" ></script>
2. Define a div
<div id= "Periodic-sunburst" class= "Periodic-sunburst" ></div>
Dataloader.js :
A Dataloader class was created, which provides two methods. The ReadFile method reads the JSON file for data. The Isinclude method determines whether the specified element exists in the array. The data is processed in the Generatecollectionview method.
var dataloader = {};// First class classification var metals_title = "metal"; var NON_METALS_ title = "Non-metallic";var others_title = "transition element";// level two classification var metal_types = ' Alkali metal | alkaline earth Metals | transition Metals | lanthanide Elements | elements | Other metals '. Split (' | '); var non_metal_types = ' Inert Gas | halogen | non-metallic '. Split (' | '); var other_types = ' quasi-metal | super-AC system ' split (' | ');D ataloader = { readfile: function (FilePath, callback) { var reqclient = new xmlhttprequest (); reqClient.onload = callback; reqclient.open ("Get", filepath, true); reqclient.send (); }, isinclude: function ( Arr, data) { if (arr.tOstring (). IndexOf (data) > -1) return true; else return false; }, generatecollectionview: function (callback) { Dataloader.readfile (' Data/elements.json ', function (e) { // Get Data var rawelementdata = json.parse (This.responsetext); var elementdata = rawelementdata[' Periodic-table-elements '].map (function (item) { item.properties.value = 1; return item.properties; }); var data = new wijmo.collections.collectionview (Elementdata); // using wijmo.collections.propertygroupdescription for first-level grouping data.groupdescriptions.push (new Wijmo.collections.PropertyGroupDescription (' type ', function (item, prop) { if ( Dataloader.isinclude (Metal_types, item[prop]) { return metals_title; } else if (Dataloader.isinclude (Non_metal_types, item[prop]) ) { return NON_METALS_TITLE; } else { return OTHERS_TITLE; } })); // second-level grouping Data.groupDescriptions.push (new wijmo.collections.PropertyGroupDescription (' type ', function (item, prop) { return item[prop]; })); callback (data); }); }};
The Generatecollectionview method calls ReadFile to obtain the JSON data, and then uses the CollectionView provided in Wijmo to group the data 2 levels. The 1th level is metal, non-metallic, transition elements. The 2nd level is their sub-level, respectively. The 3rd level is the element, and the value of each element is 1, representing the same proportion of elements.
App.js :
Compared to the simple example above, the data source bound here is collectionview.groups, which is the first-level grouping in CollectionView.
Var mysunburst;function setsunburst (Elementcollectionview) { // Create a Sun chart control mySunburst = new Wijmo.chart.hierarchical.Sunburst (' #periodic-sunburst '); mysunburst.beginupdate () ; // Setting the Legend of the Sun chart does not display mySunburst.legend.position = ' None '; // set inner circle radius mySunburst.innerRadius = 0.1; // Set selection mode mySunburst.selectionMode = ' point '; // set the location of the data display mySunburst.dataLabel.position = ' Center '; // set the contents of the data display mysunburst.datalabel.content = ' {name} '; // for data binding mysunburst.itemssource = elementcollectionview.groups; // property name containing the chart value mySunburst.binding = ' value '; // data item name mysunburst.bindingname = [' name ', ' name ', ' Symbol ']; // the name of the property that generated the subkey in the hierarchical data. mysunburst.childitemspath = [' groups ', ' items ']; mysunburst.endupdate ();};D Ataloader.generatecollectionview (Setsunburst);
Operation Result:
650) this.width=650; "style=" Margin-right:auto;margin-left:auto; "src=" http://images2015.cnblogs.com/blog/10730/ 201703/10730-20170310091535703-601672232.png "/>
Fig. 4 The periodic table of the Sun chart representation
Iv. Source code Download
The source of a simple example of a Sun chart:
Sunburstintro.zip
The Sun chart represents the code for the periodic table of elements:
Periodicsunburst.zip
Web-only front-end "Sunrise" implements the periodic table of elements