Question

我正在尝试制作JSON对象的树形图。我只是希望能够扩展/收缩JSON对象中的级别，并在最低级别上看到颜色的值/键。

我正试图用angular-google-chart做这个，但继续

无法绘制图表：未指定数据。

这是我的代码：

JS

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

HTML

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

我的JSON对象是数据库的结构。看起来基本上是这样的：

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

除了它全部在一个没有休息的长字符串中。如何获得此JSON的简单可视化？是否有更好的框架可供使用？

Answer 1

那张树图并不是你所期望的。 Google Charts Tree Map只显示一个矩形框图，其中包含基于数据中某些值的分区和颜色。单击其中一个块可以深入查看数据的下一级＆＃34;树＆＃34;结构

我认为您正在寻找更像Angular Tree Control的内容。

Answer 2

如果您引用angular-google-chart library，则表示支持Google Treemap chart，此处为demo。

在您的情况下，在显示图表之前，需要通过Treemap图表将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]
        ];

使用angular-google-chart进行简单的JSON可视化

2 个答案: