|
表 1 特定の製品の売上統計
図 1 サンバーストチャートで表された売上
表 1 から、それが階層データであることがわかります、1番目レベルは四半期、レベル 2 は月、レベル 3 は週です。図 1 は、表 1 に基づいて Excel で作成されたサンバースト チャートです。内側のリングは第 1 レベルの四半期を示し、外側のリングは第 2 レベルの月を示し、最も外側のリングは第 3 レベルの週を示します。表示されている各パーセンテージは、対応する売上に基づいて計算されます。
2. 簡単な例
サンバースト チャートを理解した後、いくつかのシナリオでは、独自のシステムでサンバースト チャートを使用したいと考えます。 Wijmo は、Web の純粋なフロントエンドでサンバースト チャートを使用できるようにする 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> ログイン後にコピー <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);ログイン後にコピー オブジェクト を作成し、データ ソースと関連プロパティを設定します。データ ソースは app.getData() を通じて提供されます。 以下はプログラムを実行した結果です。
図 2 操作結果 3. 「ライジングサンチャート」を使用して元素の周期表を実装します 上記の知識ベースを使用すると、より複雑な実装を行うことができます。以下では、「サンバースト チャート」を使用して元素の周期表を実装します。高校生の頃、誰もが元素の周期表を勉強したはずです。それは次のような表です。この表には、要素に関する詳細な情報が表示されますが、要素の分類に関する情報はあまり適切に表示されません。これを改善するために、サンバースト チャートを使用するようになりました。
図 3 元素の周期表
HTML ファイル: 簡単な例と同様に、Wijmo 関連のスタイルと js ファイルを導入する必要があります。 1. カスタム js ファイルを導入します
<script src="scripts/DataLoader.js"></script><script src="scripts/app.js"></script> ログイン後にコピー File メソッドは、json
ファイルを読み取り、データを取得します。 is Include メソッドは、指定された要素が array に存在するかどうかを判断します。データはgenerateCollectionViewメソッドで処理されます。
<p id="periodic-sunburst" class="periodic-sunburst"></p> ログイン後にコピー
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);
});
}
};ログイン後にコピー 演算結果:
図 4 サンバースト図で表された元素の周期表
|
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
