用旭日圖展示數據的三種方法

什麼是旭日圖？

旭日圖（Sunburst Chart）是一種現代餅圖，它超越傳統的餅圖和環圖，能表達清晰的層級和歸屬關係，以父子層次結構來顯示數據構成情況。旭日圖中，離遠點越近表示級別越高，相鄰兩層中，是內層包含外層的關係。

 

在實際項目中使用旭日圖，可以更細分溯源分析數據，真正瞭解數據的具體構成。而且，旭日圖不僅數據直觀，而且圖表用起來特別炫酷，分分鐘拉高數據彙報的顏值！很多數據場景都適合用旭日圖，比如，在銷售彙總報告中，方便看到每個店鋪的銷售業績分佈（如下圖）:

 

做旭日圖的三種方法

1. 用Excel（2016最新版纔有旭日圖功能）

第一步，創建數據

第二步，點擊插入選項，選擇“圖表”右下方的箭頭

第三步，在彈出的對話框中選擇“所有圖表”，然後選擇旭日圖

第四步，點擊確定，旭日圖就創建完成了。所有的數據以及層級關係都一目瞭然了。

 

 

2. 用Spread Studio表格控件

Spread Studio表格控件是一個功能和Excel類似的表格控件，用於在應用系統中實現表格數據錄入和編輯等交互功能，並且提供靈活的定製能力和豐富的數據可視化效果。

在Spread Studio V10 版本中， Windows Forms 和 ASP.NET 平臺都新增了旭日圖，實現方法也很簡單，用Spread設計器，和在Excel中一樣，只需要選擇數據源，插入旭日圖即可。

第一步，創建數據

 第二步，選擇旭日圖樣式

 第三步，創建旭日圖，即可

 

3. 用Wijmo 前端控件集

Wijmo是新一代JavaScript控件集，具有快如閃電，觸控優先的特點，能爲企業應用提供更加靈活的操作體驗，是全球率先支持Angular 的控件集。

我們嘗試用Wijmo 做一張複雜的元素週期表。傳統的元素週期表展示了元素的信息，但是沒有很好的展示元素歸類的信息。我們現在用旭日圖來做它，對這點進行改善。

傳統的元素週期表

用Wijmo 旭日圖樣式做出來的元素週期表

 

僅需3步：

第一步，引入Wijmo 相關的樣式和js文件

1、引入自定義的js文件

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

2、定義一個DIV

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

 

第二步，DataLoader.js，獲得數據

創建了一個DataLoader類，其中提供兩個方法。readFile方法讀取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級分別是他們的子級別。第3級是元素，每個元素的Value都是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);

以上就是用旭日圖展示數據的三種方法，供大家參考。