ホームページ  >  記事  >  ウェブフロントエンド  >  Web フロントエンドは元素の周期表を実装します

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

PHPz
PHPzオリジナル
2017-03-12 15:41:426486ブラウズ

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。