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

Source: Internet
Author: User
Tags readfile dataloader

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.