Web-only front-end "Sunrise" implements the periodic table of elements

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, 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