웹 프런트 엔드는 원소 주기율표를 구현합니다.

1. 선버스트 차트란 무엇인가요?

선버스트 차트는 Excel 2016에 새롭게 추가된 새로운 유형의 차트입니다. 원형 차트와 다소 유사하지만 원형 차트의 장점은 비율을 표시할 수 있다는 것입니다. 그러나 원형 차트는 단일 수준 데이터만 표시할 수 있습니다. Sunburst 차트는 다단계 데이터의 비율을 나타내는 데 사용됩니다. 선버스트 차트는 계층적 방식으로 표시되며 계층적 데이터를 표시하는 데 이상적입니다. 계층 구조의 각 수준의 비율은 원점에 가까울수록 원의 수준이 높아지는 것으로 표시되며, 가장 안쪽의 원은 최상위 구조를 나타내며, 레이어별로 데이터의 비율을 살펴봅니다.

선버스트 차트의 매력을 미리 느껴보기 위해 간단한 예를 들어보겠습니다.

7월

73

tr>

분기

季度	月份	周	销量
Q1	1月份		29
	2月份	第一周	63
		第二周	54
		第三周	91
		第四周	78
	3月份		49
Q2	4月份		66
	5月份		110
	6月份		42
Q3	7月份		19
	8月份		73
	9月份		109
Q4	10月份		32
	11月份		112
	12月份		99

월 td>

주

매출

1분기

1월

29 td >

2월

첫 번째 주

63

두 번째 주

54

3주

91

4주차

78

3월

　

49

2분기

4월

66

5월

110

6개월

　

42

3분기

　

19

8월

9월

td>

109

4분기

10월 td>

32

11월

　

112

12월

　

99

표 1 특정 상품의 판매 통계

그림 1 선버스트 차트로 표현되는 매출

표 1을 보면 계층적 데이터로 1레벨이 분기, 2레벨이 분기임을 알 수 있다. 월, 레벨 3은 Zhou입니다. 그림 1은 표 1을 기반으로 엑셀로 그린 선버스트 차트이다. 안쪽 원은 첫 번째 수준 분기를 표시하고, 바깥쪽 원은 두 번째 수준 월을 표시하며, 가장 바깥쪽 원은 세 번째 수준 주를 표시합니다. 표시된 각 비율은 해당 판매량을 기준으로 계산됩니다.

2. 간단한 예

선버스트 차트를 이해한 후 일부 시나리오에서는 자체 시스템에서 선버스트 차트를 사용하고 싶습니다. Wijmo는 웹의 순수 프런트 엔드에서 선버스트 차트를 사용할 수 있게 해주는 JScontrol을 제공합니다. .Net 플랫폼에서 선버스트 차트를 사용하려면 ComponentOne에서 FlexChart에 대해 알아볼 수 있습니다. 다음의 간단한 예를 통해 선버스트 차트를 사용하는 방법을 미리 이해할 수 있습니다.

HTML파일:

1. Wijmo의 CSS와 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.

정의a p

이 p 사용자는 선버스트 차트를 표시합니다.

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

3. 맞춤 js 파일 소개

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

은 다단계 데이터를 생성하는 getData 메서드가 포함된 앱 클래스를 만들었습니다. 수준은 연도, 분기, 월입니다.

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);

ID를 기반으로 생성 p Sunburst

Object의 데이터 소스 및 관련 속성을 설정합니다. 데이터 소스는 app.getData()를 통해 제공됩니다.

다음은 프로그램을 실행한 결과입니다.

그림 2 작업 결과

3. "Sunburst Chart"를 사용하여 주기율표를 구현합니다. 요소

위의 지식 보유를 통해 보다 복잡한 구현을 수행할 수 있습니다. 아래에서는 "Sunburst Chart"를 사용하여 원소 주기율표를 구현합니다. 우리는 고등학교 시절에 원소주기율표를 공부한 적이 있을 것입니다. 다음과 같은 표입니다. 이 표에는 요소에 대한 자세한 정보가 표시되지만 요소 분류에 대한 정보는 잘 표시되지 않습니다. 이제 이를 개선하기 위해 선버스트 차트를 사용하여 수행합니다.

그림 3 원소 주기율표

HTML파일:

간단한 예시와 마찬가지로 Wijmo 관련 스타일과 js 파일을 가져와야 합니다.

1. 사용자 정의 js 파일 도입

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

2. p를 정의합니다

>

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

DataLoader.js

: 는 두 가지 메서드를 제공하는 DataLoader 클래스를 만듭니다. read

File

메소드는 json 파일을 읽어 데이터를 가져옵니다. isInclude 메소드는 지정된 요소가 배열에 존재하는지 여부를 확인합니다. 데이터는 generateCollectionView 메소드에서 처리됩니다.

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);
        });
    }
};

generateCollectionView 메서드에서 readFile을 호출하여 json 데이터를 얻은 다음 Wijmo에서 제공하는 CollectionView를 사용하여 데이터를 2단계 그룹화합니다. 레벨 1은 금속, 비금속, 전이원소입니다. 레벨 2는 각각 하위 레벨입니다. 세 번째 수준은 요소이며, 각 요소의 값은 1로 요소의 비율이 동일함을 나타냅니다.

app.js

: 이전의 간단한 예와 비교하면 여기에 바인딩된 데이터 소스는 CollectionView .Groups입니다. , 이는 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);

실행 결과:

그림 . 4 선버스트 도표로 표현되는 원소주기율표

위 내용은 웹 프런트 엔드는 원소 주기율표를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!