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>
정의a p
이 p 사용자는 선버스트 차트를 표시합니다.<p id="introChart"></p>
<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; }, };
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);
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>
>
<p id="periodic-sunburst" class="periodic-sunburst"></p>
: 는 두 가지 메서드를 제공하는 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); }); } };
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!