Web pure front-end "Rising Sun" to implement the periodic table of elements and rising sun Elements

Web pure front-end "Rising Sun" to implement the periodic table of elements and rising sun Elements

I. What is sunsun?

Sunday chart is a new chart added in Excel 2016. For some similar pie charts, the advantage of a pie chart is that it can display the proportion. However, a pie chart can only display single-level data. The rising sun chart is used to represent the proportion of multi-level data. The rising sun chart is displayed in a layered manner and is suitable for displaying hierarchical data. In the hierarchy, the proportion of each level is represented by one ring. The closer the source is, the higher the ring level. The inner circle indicates the top-level structure, and the data proportion is viewed layer by layer.

Let's take a simple example to get a glimpse of the charm of the Rising Sun chart.

Quarter	Month	Week	Sales Volume
Q1	March		29
	March	WEEK 1	63
		Week 2	54
		Week 3	91
		Week 4	78
	March		49
Q2	March		66
	March		110
	March		42
Q3	March		19
	March		73
	March		109
Q4	March		32
	March		112
	March		99

Table 1 sales statistics of a product

 

Figure 1 sales volume represented by Sunday

From table 1, we can see that it is a hierarchical data, with a quarter level of 1st, a month level of 2nd, and a week level of 3rd. Figure 1 shows the rising sun Chart drawn in Excel Based on table 1. The inner layer shows the second-level quarter, the outer ring shows the second-level month, and the outermost ring shows the second-level Week. Each proportion is calculated based on the corresponding sales.

Ii. Simple Example

After learning about the rising sun chart, we want to use it in some scenarios. The JS control provided in Wijmo allows us to use the Rising Sun Graph on the pure front-end of the Web. If you want to use the Rising Sun Graph on the. Net platform, you can understand the FlexChart in ComponentOne. The following is a simple example to give you a preliminary understanding of how to use the Rising Sun Graph.

HTML file:

1. Introduce css and js of Wijmo

<!-- Styles --> <link href="styles/vendor/wijmo.min.css" rel="external nofollow" rel="stylesheet" /> <link href="styles/app.css" rel="external nofollow" rel="stylesheet" /> <!-- Wijmo --> <script src="scripts/vendor/wijmo.min.js" type="text/javascript"></script> <script src="scripts/vendor/wijmo.chart.min.js" type="text/javascript"></script><script src="scripts/vendor/wijmo.chart.hierarchical.min.js" type="text/javascript"> </script>

2. Define a DIV

The DIV user displays the rising sun chart.

<div id="introChart"></div>

3. Introduce custom js files

<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', 'aug', 'sept'], ['oct', 'nov ', 'dec '], years = [2014,201 5, 2016]; years. forEach (function (y, I) {months. forEach (function (q, idx) {var quar = 'q' + (idx + 1); Q. forEach (function (m) {data. push ({year: y. toString (), quarter: quar, month: m, value: Math. round (Math. random () * 100)}); return data ;},};

An app class is created, which contains a getData method to generate a multi-level data. Its levels are year, quarter, and month.

Sunburst. js:

(Function (wijmo, app) {'use strict '; // create the control var chart = new wijmo. chart. hierarchical. sunburst ('# introchart'); // initialize the Sunday chart. beginUpdate (); // chart of the attribute name contained in the Rising Sun Graph. binding = 'value'; // sets the name of the Child Project of the hierarchical data, which is used to generate the child chart in the Rising Sun Graph. bindingName = ['Year', 'quarter ', 'month']; // set the data source chart. itemsSource = app. getData (); // set the chart where the data is displayed. dataLabel. position = wijmo. chart. pieLabelPosition. center; // set the data display content chart. dataLabel. content = '{name}'; // sets the selection mode chart. selectionMode = 'point'; chart. endUpdate () ;}) (wijmo, app );

Create a Sunburst object based on the Div ID and set the data source and related attributes. The data source is provided by app. getData.

The following is the result of the program running.

 

Figure 2 running result

3. Implement the periodic table of elements using the rising sun chart

With the above knowledge reserves, we can make a more complex implementation. Next we will use the Rising Sun Graph to implement the periodic table of elements. When we were in high school, we should have learned the periodic table, which is similar to the following table. This table shows more information about elements, but does not display the information about element classification. We now use the Rising Sun Graph to improve this.

Figure 3 periodic table of elements

HTML file:

Similar to the simple example, You need to introduce Wijmo-related styles and js files.

1. Introduce custom js files

<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 is created, which provides two methods. The readFile method reads json files to obtain data. The isInclude method checks whether the specified element exists in the array. The generateCollectionView method processes the data.

Var DataLoader ={}; // level-1 var METALS_TITLE = "Metal"; var NON_METALS_TITLE = "non-metallic"; var OTHERS_TITLE = "transition element "; // level-2 Classification var METAL_TYPES = 'alkali metal | alkaline earth metal | Transition Metal | Trace Element | Other Metals '. split ('|'); var NON_METAL_TYPES = 'inert gas | halogen | nonmetallic '. split ('|'); var OTHER_TYPES = 'quasi-metallic | hyper-metallic series '. split ('|'); DataLoader = {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) {// obtain the 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); // use wijmo. collections. propertyGroupDescription is used to group data at the first level. 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 ;}}); // groups data in Level 2. groupDescriptions. push (new wijmo. collections. propertyGroupDescription ('type', function (item, prop) {return item [prop] ;})); callback (data );});}};

Call readFile in the generateCollectionView method to obtain json data, and then use the CollectionView provided in Wijmo to group the data at two levels. Grade 1st is a metal, non-metallic, and transition element. The second level is their sub-level. Level 1 is an element, and the Value of each element is 1, indicating that the proportion of elements is the same.

App. js:

Compared with the simple example of the front edge, the data source bound here is CollectionView. Groups, which is the first group in CollectionView.

Var mySunburst; function setSunburst (elementCollectionView) {// create Sunday chart control mySunburst = new wijmo. chart. hierarchical. sunburst ('# periodic-sunburst'); mySunburst. beginUpdate (); // set the legend of the Rising Sun chart to not display mySunburst. legend. position = 'none'; // set the inner circle radius mySunburst. innerRadius = 0.1; // set the selection mode to mySunburst. selectionMode = 'point'; // sets the position of the data display mySunburst. dataLabel. position = 'center'; // set the data display content mySunburst. dataLabel. co Ntent = '{name}'; // bind data to mySunburst. itemsSource = elementCollectionView. groups; // The property name mySunburst that contains the chart value. binding = 'value'; // data item name mySunburst. bindingName = ['name', 'name', 'symbol']; // generate the attribute name of the subitem in hierarchical data. MySunburst. childItemsPath = ['groups', 'items ']; mySunburst. endUpdate () ;}; DataLoader. generateCollectionView (setSunburst );

Running result:

Figure 4 periodic table represented by the rising sun

4. Download source code

Source code:

SunburstIntro.rar

The red sun chart indicates the code of the periodic table of elements:

PeriodicSunburst.rar

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!