Использование данных JSON для создания древовидной карты с использованием диаграмм Google или d3.js - PullRequest
Новая
       10

Использование данных JSON для создания древовидной карты с использованием диаграмм Google или d3.js

0 голосов
/ 12 июня 2018

Часть моих данных JSON выглядит следующим образом.

[ { "App": "app1", "count": 8, "country": "FR", "period": "2018" }, { "App": "app2", "count": 7, "country": "FR", "period": "2018" }, { "App": "app3", "count": 12, "country": "FR", "period": "2018" }, { "App": "app4", "count": 2, "country": "FR", "period": "2018" }, { "App": "app5", "count": 25, "country": "FR", "period": "2018" }, { "App": "app6", "count": 49, "country": "FR", "period": "2018" }, { "App": "app7", "count": 5, "country": "FR", "period": "2018" }, { "App": "app8", "count": 189, "country": "FR", "period": "2018" } ] .
Я хочу нарисовать древовидную карту для этих данных JSON, которая будет выглядеть следующим образом:

enter image description here

Древовидная карта рисуется на основе значения счетчика для разных приложений.Страна и период могут быть проигнорированы.

Я нашел эту документацию Заполнение данных Но проблема в том, что DataTable должен быть в определенном формате, который не совсем похож на мой DataTable.Подскажите, пожалуйста, как мне это сделать, используя d3.js или диаграммы Google?

1 Ответ

0 голосов
/ 13 июня 2018

Наконец, я нашел способ.
Есть два возможных способа сделать это:

  • Преобразовать ваши данные JSON в массив массива, а затем выполнить ссылка .

  • Использование Angular-Google-Chart.Для этого вам необходимо преобразовать данные в формат DataTable, как описано здесь .После этого вы можете перейти по этой ссылке .

Я сделал это, используя первый метод.

// treemap.js  

var objarr = [
  {
"App": "app1",
"count": 8,
"country": "FR",
"period": "2018"
  },
  {
"App": "app2",
"count": 7,
"country": "FR",
"period": "2018"
  },
  {
"App": "app3",
"count": 12,
"country": "FR",
"period": "2018"
  },
{
"App": "app4",
"count": 2,
"country": "FR",
"period": "2018"
},
  {
"App": "app5",
"count": 25,
"country": "FR",
"period": "2018"
  },
  {
"App": "app6",
"count": 49,
"country": "FR",
"period": "2018"
  },
  {
"App": "app7",
"count": 5,
"country": "FR",
"period": "2018"
  },
  {
"App": "app8",
"count": 189,
"country": "FR",
"period": "2018"
  }
]
var arrArr = [['app','parent', 'count'],['app', null, 0]]

var n = objarr.length;

for ( i = 0; i < n; i++){
  arrArr[i+2] = [objarr[i].App, 'app', objarr[i].count]
}
google.charts.load('current', {'packages':['treemap']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
    var data = google.visualization.arrayToDataTable(arrArr);

    tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

    tree.draw(data, {
      minColor: '#f00',
      midColor: '#ddd',
      maxColor: '#0d0',
      headerHeight: 15,
      fontColor: 'black',
      showScale: true
    });

  }

И используйте этот скрипт в вашем index.html. 

// index.html  
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="try.js">
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
...