웹 프런트 엔드는 원소 주기율표를 구현합니다.
- PHPz원래의
- 2017-03-12 15:41:426509검색
1. 선버스트 차트란 무엇인가요?
선버스트 차트는 Excel 2016에 새롭게 추가된 새로운 유형의 차트입니다. 원형 차트와 다소 유사하지만 원형 차트의 장점은 비율을 표시할 수 있다는 것입니다. 그러나 원형 차트는 단일 수준 데이터만 표시할 수 있습니다. Sunburst 차트는 다단계 데이터의 비율을 나타내는 데 사용됩니다. 선버스트 차트는 계층적 방식으로 표시되며 계층적 데이터를 표시하는 데 이상적입니다. 계층 구조의 각 수준의 비율은 원점에 가까울수록 원의 수준이 높아지는 것으로 표시되며, 가장 안쪽의 원은 최상위 구조를 나타내며, 레이어별로 데이터의 비율을 살펴봅니다.
선버스트 차트의 매력을 미리 느껴보기 위해 간단한 예를 들어보겠습니다.
|
분기
|
월 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 | tr>|||||||||||||||||||||||||||||||||||||||||||||||||||
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 SunburstObject의 데이터 소스 및 관련 속성을 설정합니다. 데이터 소스는 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);
실행 결과:
위 내용은 웹 프런트 엔드는 원소 주기율표를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!