|
99 |
|
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
