Angular-googlecharts-treemap-chart
提供:Dev Guides
角度付きGoogleチャート-ツリーマップ
TreeMapはデータツリーを視覚的に表現したもので、各ノードには0個以上の子と1つの親(ルートを除く)があります。 各ノードは長方形として表示され、割り当てた値に応じてサイズと色を変更できます。 サイズと色は、グラフ内の他のすべてのノードに対して相対的に評価されます。 以下は、ツリーマップチャートの例です。
link:/angular_googlecharts/angular_googlecharts_configuration_syntax [Googleグラフの構成構文]の章で、グラフを描画するために使用される構成を既に確認しました。 次に、TreeMapチャートの例を見てみましょう。
構成
TreeMapグラフを表示するために TreeMap クラスを使用しました。
type = 'TreeMap';
例
*_app.component.ts_*
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.componentl',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = '';
type='TreeMap';
data = [
["Global",null,0,0],
["America","Global",0,0],
["Europe","Global",0,0],
["Asia","Global",0,0],
["Australia","Global",0,0],
["Africa","Global",0,0],
["USA","America",52,31],
["Mexico","America",24,12],
["Canada","America",16,-23],
["France","Europe",42,-11],
["Germany","Europe",31,-2],
["Sweden","Europe",22,-13],
["China","Asia",36,4],
["Japan","Asia",20,-12],
["India","Asia",40,63],
["Egypt","Africa",21,0],
["Congo","Africa",10,12],
["Zaire","Africa",8,10],
];
columnNames = ["Location", "Parent","Market trade volume (size)","Market increase/decrease (color)"];
options = {
minColor:"#ff7777",
midColor:'#ffff77',
maxColor:'#77ff77',
headerHeight:15,
showScale:true
};
width = 550;
height = 400;
}
結果
結果を確認します。