角度のGoogleチャットによるシンプルなJSON可視化

Question

JSONオブジェクトのツリーマップを作成しようとしています。私はちょうどJSONオブジェクトのレベルを拡大/縮小し、最も低いレベルの色で値/キーを見ることができるようにしたいと思います。

私は角-グーグルチャートでこれをやろうとしているが、

がチャートを描くことはできません取得しておくよ：何のデータが指定されていません。

<div google-chart chart="model.chart" style="{{model.chart.cssStyle}}"/> 

私のJSONオブジェクトは、データベースの構造である

JS

var chart1 = {}; 
chart1.type = "TreeMap"; 
chart1.data = H2JModel.output 
model.chart = chart1; 

HTML：

は、ここに私のコードです。それはこのように、基本的になります。

[{ "Table": 
    { "Properties" : [ 
    { "name" : "About"} 
    ]}, 
    { "Columns" : [ 
    { 
     "name": "Name", 
     "unique": "false", 
     "type": "String" 
    } 
    ]} 
} 
}] 

それは、すべてのブレークのない1つの長い文字列である点を除きます。このJSONを簡単に視覚化するにはどうすればよいですか？使用するためのより良いフレームワークはありますか？

Answer 1

そのツリーマップは期待したものではありません。 Google Charts Tree Mapは、データ内のある値に基づいて、分割と色の付いた四角形のブロック図を示しています。ブロックの1つをクリックすると、データの「ツリー」構造の次のレベルにドリルダウンすることができます。

あなたはAngular Tree Controlのようなものを探していると思います。

Answer 2

angular-google-chart libraryを参照している場合はGoogle Treemap chartをサポートしています。こちらはdemoです。チャートが表示される前に、ツリーマップチャートでをサポートJSONデータに変換する必要H2JModel.outputあなたのケースで

。データ形式の例を次に示します。

chart1.data = [ 
      ['Name', 'Parent Name', 'Value'], 
      ['Global', null,     0], 
      ['America', 'Global',    0], 
      ['Europe', 'Global',    0], 
      ['Asia',  'Global',    0], 
      ['Australia', 'Global',    0], 
      ['Africa', 'Global',    0], 
      ['Brazil', 'America',   11], 
      ['USA',  'America',   52], 
      ['Mexico', 'America',   24], 
      ['Canada', 'America',   16], 
      ['France', 'Europe',    42], 
      ['Germany', 'Europe',    31], 
      ['Sweden', 'Europe',    22], 
      ['Italy',  'Europe',    17], 
      ['UK',  'Europe',    21] 
     ];