Простая визуализация JSON с угловым графиком google

Question

Я пытаюсь создать древовидную карту объекта JSON. Я просто хотел бы иметь возможность расширять/сжимать уровни в объекте JSON и видеть значения/клавиши в цвете на самых низких уровнях.

Я пытаюсь сделать это с помощью углового-Google-диаграммы, но продолжают получать

Не могу нарисовать диаграмму: нет данных, указанных.

Вот мой код:

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 просто показывает прямоугольную блок-схему с делениями и цветами на основе некоторого значения в ваших данных. Нажатие на один из блоков позволяет вам перейти на следующий уровень структуры данных «Дерево».

Я думаю, что вы ищете что-то более похожее на Angular Tree Control.

Answer 2

Если вы ссылаетесь на angular-google-chart library, то он поддерживает Google Treemap chart, здесь demo.

В вашем случае H2JModel.output необходимо преобразовать в данные JSON поддерживается по карте карты до отображения графика. Ниже приведен пример формата данных:

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] 
     ];