Web フロントエンドは元素の周期表を実装します

1. サンバースト グラフとは何ですか?

サンバースト グラフは、Excel 2016 の新しいタイプのグラフ new です。円グラフに似ていますが、円グラフの利点は比率を表示できることです。ただし、円グラフでは単一レベルのデータしか表示できません。サンバースト チャートは、マルチレベル データの割合を表すために使用されます。サンバースト チャートは階層的に表示されるため、階層データの表示に最適です。階層内の各レベルの割合は円で表され、原点に近づくほど円のレベルが高くなります。これにより、データ層の割合がわかります。層。

簡単な例を使用して、サンバースト チャートの魅力を予備的に感じてみましょう。

10月3211299

四半期	月	週	売上
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四半期
			11月
			12月
			表 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 ファイルを読み取り、データを取得します。 is Include メソッドは、指定された要素が 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 サイトの他の関連記事を参照してください。