Home

C2i 3D標準チャートコンポーネント

同類タイプデータの比較に適合します。視覚的に3Dで表現していますので立体感によりインパクトが効果的です。

デモ手順

0.スクリーンの場所問わず、ダブルクリックで項目値別にチャートが並べ変える
例:設備位置基準で　降順－＞昇順－＞元順
1.チャート種類ボタン
チャート類別変更時設定されているエニメーション時間とeasing関数適用
2.データ更新ボタン
各チャート毎のデータランダム変更
3.データ縮小ボタン
チャート数が減少
4.図形自動変更ボタン
5秒（オプション設定）単位でチャート種類自動変更
5.オプション窓: hキーで変換VIEW処理
オプションで任意変更
*.パタンタイプの場合
パタン適用窓で位置指定可能（使用方法：クリック後、マウス移動で当該領域変換設定、最終クリックで領域設定完了)

チャートタイプ

チャートタイプ 概要 設定オプション
累積棒(StackBar) 同一シリーズデータを累積し、棒グラフをレドリング yDim: { cluster: 'stackbar' }
累積棒100%(StackBar100) 同一シリーズデータの累積データについてパーセント棒グラフをレドリング yDim: { cluster: 'stackbar100' }
グループ棒(GroupBar) 同一シリーズデータを隣接して棒グラフをレンダリング yDim: { cluster: 'groupbar' }
累積領域バー(StackArea) 同一シリーズデータを累積し、領域チャートをレンダリング yDim: { cluster: 'stackarea' }
累積バー100%(StackArea100) 一シリーズデータの累積データについてパーセント領域チャートをレドリング yDim: { cluster: 'stackarea100' }
累積バー(StackStream) 同一シリーズデータを累積し、連続流れのようにレンドリング yDim: { cluster: 'stackstream' }

チャートタイプ

チャートタイプ 概要 設定オプション
カーブ 個々のチャートを上下にカーブを絵描きながら視覚化し、設定したオプションにより複数階層でレドリング geometry: { type: 'curve' }
パターン 個々のチャートを文字などのパターンを絵描きながら視覚化する。パターンの模様により不自然的な模様になることはある geometry: { type: 'pattern' }
テーブル 個々のチャートをテーブル形に配置し視覚化する。列（カラム）数により行数は自動設定 geometry: { type: 'table' }
球形 個々のチャートを球形に絵描きながら視覚化し、設定されたオプションにより複数階層でレドリング geometry: { type: 'sphere' }
螺線形 個々のチャートを螺線形に配置しながら視覚化する。個々のチャート個数により不自然的な模様になることはある geometry: { type: 'helix' }
グリード 個々のチャートをｎ次元のグリード形に配置し視覚化する。,列（カラム）数＆行数により階層は自動設定정 geometry: { type: 'grid' }

データ構造（テキストデータ）

0.csv

sido,gu,1stYear,2ndYear,3rdYear,4thYear,5thYear
ソウル,ソウル本町,320465,319375,318383,323515,329571
ソウル,ソウル鍾路区,4628,4663,4166,3754,3525
ソウル,ソウル市中区,4259,3979,3953,3837,3990
ソウル,ソウル龍山区,4112,4241,4317,4433,4535
1.json

[
    {
        "coName": "B2iLAB",
        "children": [
            { "year": "2008", "amt_1": 10, "amt_2": 0, "amt_n": 540 },
            { "year": "2009", "amt_1": 20, "amt_2": 30, "amt_n": 440 },
            { "year": "2010", "amt_1": 30, "amt_2": 0, "amt_n": 550 }
        ]},
    {
        "name": "ソフトダイム",
        "children": [
            { "year": "2008", "amt_1": 0, "amt_2": 0, "amt_n": 30 },
            { "year": "2009", "amt_1": 0, "amt_2": 0, "amt_n": 220 },
            { "year": "2010", "amt_1": 0, "amt_2": 20, "amt_n": 0 }
        ]
    }
]

開発者へソース提供部分

HOME、ヘルフ、データ更新及び減少、左右回転、図形自動変換は開発者がC2iメタと APIを組み込んで任意にCodingして提供したUIです。

X

販売本部

1,200