ホームページ > 記事 > ウェブフロントエンド > Web フロントエンドは元素の周期表を実装します
1. サンバースト グラフとは何ですか?
サンバースト グラフは、Excel 2016 の新しいタイプのグラフ new です。円グラフに似ていますが、円グラフの利点は比率を表示できることです。ただし、円グラフでは単一レベルのデータしか表示できません。サンバースト チャートは、マルチレベル データの割合を表すために使用されます。サンバースト チャートは階層的に表示されるため、階層データの表示に最適です。階層内の各レベルの割合は円で表され、原点に近づくほど円のレベルが高くなります。これにより、データ層の割合がわかります。層。
簡単な例を使用して、サンバースト チャートの魅力を予備的に感じてみましょう。
四半期 |
月 |
週 |
売上 |
Q1 |
1月 |
|
29 |
2月 |
第1週 |
63 |
|
第2週 |
54 | ||
第3週 | 91 | ||
第4週 | 78 | ||
3月 | 49 | ||
Q2 | 4月 | 66 | |
5月 | 110 | ||
6月 |
|
42 | |
Q3 | 7月 | 19 | |
8月 | 73 | ||
9月 | 第4四半期 |
||
32 | 11月 |
||
112 | 12月 |
||
99 |
表 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>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);p の ID に基づいて Sunburst オブジェクト を作成し、データ ソースと関連プロパティを設定します。データ ソースは app.getData() を通じて提供されます。 以下はプログラムを実行した結果です。図 2 操作結果 3. 「ライジングサンチャート」を使用して元素の周期表を実装します 上記の知識ベースを使用すると、より複雑な実装を行うことができます。以下では、「サンバースト チャート」を使用して元素の周期表を実装します。高校生の頃、誰もが元素の周期表を勉強したはずです。それは次のような表です。この表には、要素に関する詳細な情報が表示されますが、要素の分類に関する情報はあまり適切に表示されません。これを改善するために、サンバースト チャートを使用するようになりました。図 3 元素の周期表 HTML ファイル: 簡単な例と同様に、Wijmo 関連のスタイルと js ファイルを導入する必要があります。 1. カスタム js ファイルを導入します<script src="scripts/DataLoader.js"></script><script src="scripts/app.js"></script>2. 2 つのメソッドを提供する p DataLoader クラスを定義します。 read File メソッドは、json メソッドは、指定された要素が arrayに存在するかどうかを判断します。データはgenerateCollectionViewメソッドで処理されます。 <p id="periodic-sunburst" class="periodic-sunburst"></p>generateCollectionViewメソッドでreadFileを呼び出してjsonデータを取得し、Wijmoが提供するCollectionViewを使用してデータを2段階にグループ化します。レベル 1 は金属、非金属、および遷移元素です。レベル 2 はそれぞれそのサブレベルです。 3 番目のレベルは要素であり、各要素の値は 1 であり、要素の割合が同じであることを示します。 app.js: 前の単純な例と比較すると、ここでバインドされているデータ ソースは CollectionView.Groups であり、これは CollectionView の第 1 レベルのグループです。 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 フロントエンドは元素の周期表を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。