Web front-end implements the periodic table of elements

1. What is a sunburst chart

The sunburst chart is a new chart in Excel 2016. Somewhat similar to a pie chart, the advantage of a pie chart is that it can show proportions. But pie charts can only display single-level data. Sunburst charts are used to represent the proportion of multi-level data. Sunburst charts are displayed in a hierarchical manner and are ideal for displaying hierarchical data. The proportion of each level in the hierarchy is represented by a circle. The closer to the origin, the higher the level of the circle. The innermost circle represents the top-level structure, and then you can look at the proportion of data layer by layer.

We use a simple example to get a preliminary feel for the charm of the sunburst chart.

##Monthweek Sales volume Q1FebruarySecond Week##Third WeekWeek 4MarchQ2##July　19　73　109October　　

Table 1 Sales statistics of a certain product

Figure 1 Sales represented by sunburst chart

We can see from Table 1 that it is a hierarchical data, the first level is the quarter, the second level is the month, Level 3 is Zhou. Figure 1 is a sunburst chart drawn in Excel based on Table 1. The inner ring shows the first-level quarter, the outer ring shows the second-level month, and the outermost ring shows the third-level week. Each percentage shown is calculated based on its corresponding sales.

2. Simple example

After we understand the sunburst chart, in some scenarios we want to use the sunburst chart in our own system. Wijmo provides JS control that allows us to use the sunburst chart on the pure front-end of the Web. If you want to use the sunburst chart under the .Net platform, you can learn about FlexChart in ComponentOne. Through the following simple example, you can have a preliminary understanding of how to use the sunburst chart.

HTMLFile:

1. Introduce Wijmo’s css and js

    <!-- Styles -->
    <link href="styles/vendor/wijmo.min.css" rel="stylesheet" />
    <link href="styles/app.css" 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, DefinitionA p

This p user displays the sunburst chart.

<p id="introChart"></p>

3. Introduce custom js files

<script src="scripts/app.js"></script><script src="scripts/sunburst.js"></script>

app.js：

// 产生数据var app = {
    getData: function () {        var data = [],
            months = [['Jan', 'Feb', 'Mar'], ['Apr', 'May', 'June'], ['Jul', 'Aug', 'Sep'], ['Oct', 'Nov', 'Dec']],
            years = [2014, 2015, 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;
    },
};

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

sunburst.js：

(function(wijmo, app) {    'use strict';    // 创建控件
    var chart = new wijmo.chart.hierarchical.Sunburst('#introChart');    // 初始化旭日图    chart.beginUpdate();    // 旭日图包含的值得属性名
    chart.binding = 'value';    // 设置层级数据中子项目的名称，用于在旭日图中生成子项
    chart.bindingName = ['year', 'quarter', 'month'];    // 设置数据源
    chart.itemsSource = app.getData();    // 设置数据显示的位置
    chart.dataLabel.position = wijmo.chart.PieLabelPosition.Center;    // 设置数据显示的内容
    chart.dataLabel.content = '{name}';    // 设置选择模式
    chart.selectionMode = 'Point';

    chart.endUpdate();
})(wijmo, app);

Create one based on the ID of p SunburstObject, set the data source and related properties. The data source is provided through app.getData().

The following is the result of running the program.

Figure 2 Running results

3. Use the "Sunburst Chart" to implement the periodic table of elements

With the above knowledge reserve, we can do a more complex implementation. Below we use the "Sunburst Chart" to implement the periodic table of elements. When we were in high school, we should all have studied the periodic table of elements. It is a table similar to the following. This table displays more information about the elements, but does not display the information about the classification of the elements very well. We now do it using a sunburst chart to improve on this.

Figure 3 Periodic Table of Elements

HTMLFile:

Similar to the simple example, Wijmo-related styles and js files need to be introduced.

1. Introduce a custom js file

<script src="scripts/DataLoader.js"></script><script src="scripts/app.js"></script>

2. Define a p

<p id="periodic-sunburst" class="periodic-sunburst"></p>

DataLoader.js：

Created a DataLoader class, which provides two methods. The readFile method reads the json file to obtain data. The isInclude method determines whether the specified element exists in the array. The data is processed in generateCollectionView method.

var DataLoader = {};// 一级分类var METALS_TITLE = "金属";var NON_METALS_TITLE = "非金属";var OTHERS_TITLE = "过渡元素";// 二级分类var METAL_TYPES = '碱金属|碱土金属|过渡金属|镧系元素|锕系元素|其他金属'.split('|');var NON_METAL_TYPES = '惰性气体|卤素|非金属'.split('|');var OTHER_TYPES = '准金属|超锕系'.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) {            // 获取数据
            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);            //  利用wijmo.collections.PropertyGroupDescription 进行第一级分组
            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;
                }
            }));            // 进行第二级分组
            data.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 perform 2-level grouping of the data. Level 1 is metals, nonmetals, and transition elements. Level 2 are their sub-levels respectively. The third level is elements, and the Value of each element is 1, indicating that the proportion of elements is the same.

app.js：

Compared with the previous simple example, the data source bound here is CollectionView .Groups, which is the first-level grouping in CollectionView.

var mySunburst;function setSunburst(elementCollectionView) {   
    // 创建旭日图控件
    mySunburst = new wijmo.chart.hierarchical.Sunburst('#periodic-sunburst'); 

    mySunburst.beginUpdate();    // 设置旭日图的图例不显示
    mySunburst.legend.position = 'None';    // 设置内圆半径
    mySunburst.innerRadius = 0.1;    // 设置选择模式
    mySunburst.selectionMode = 'Point';    // 设置数据显示的位置
    mySunburst.dataLabel.position = 'Center';    // 设置数据显示的内容
    mySunburst.dataLabel.content = '{name}'; 

    // 进行数据绑定
    mySunburst.itemsSource = elementCollectionView.groups;    // 包含图表值的属性名
    mySunburst.binding = 'value';    // 数据项名称
    mySunburst.bindingName = ['name', 'name', 'symbol']; 

    // 在分层数据中生成子项的属性的名称。
    mySunburst.childItemsPath = ['groups', 'items']; 
    mySunburst.endUpdate();

};

DataLoader.generateCollectionView(setSunburst);

Running results:

##Picture 4 Periodic table of elements represented by sunburst diagram

##Quarterly
January		29
	First week	63
		54
		91
		78
		49
April	##	66	May
		110	June
		42	Q3
			August
			September
			##Q4
	32		November
	112		December
	99

The above is the detailed content of Web front-end implements the periodic table of elements. For more information, please follow other related articles on the PHP Chinese website!