Googleの視覚化のためのjavascriptで配列の値を数えよう

Question

私はFacebook Graph APIを使って人から好きなものを取得しています。私はそれをグラフ化するためにGoogleグラフを使いたいと思います。しかし、残念ながら、私はそれをやる方法が少し失われています。

のFacebookからのアレイresponse.likes.dataは、この形式があります：

[{"name":"Death Stranding","category":"Video Game","id":"1583509281947417"},{"name":"Ryan Gosling","category":"Artist","id":"246631252031491"},{"name":"The Nice Guys","category":"Movie","id":"1668045260089410"},{"name":"The Tonight Show Starring Jimmy Fallon","category":"TV Show","id":"31732483895"},{"name":"Hardcore Henry","category":"Movie","id":"653090358094272"},{"name":"Bronson","category":"Movie","id":"237617070301"}] 

をしかし、私は、私はGoogleのチャートのために、このようにそれをフォーマットする必要があると思う：

 var data = google.visualization.arrayToDataTable([ 
     ['Categories', 'Likes count'], 
     ['Films',  11], 
     ['Brands',  2], 
     ['TV Shows', 2], 
     ['Artists', 2], 
     ['Music', 7] 
    ]); 

両方私はあらかじめその返答が何であるか分からないので、好きなもののカテゴリーと数は変数になります。

forとpushを使用して、配列上の異なるカテゴリを取得することができました。しかし、私はどのようにそれらのカテゴリがそれぞれどれくらいの好きであるかをカウントする方法を知りませんし、[カテゴリ、数]のようにそれをフォーマットする方法はさらに少なくなります。

私は非常にこれに新しいし、コード方法を学ぼうとしているので、あなたが持っているすべての入力を本当に感謝します。

ありがとうございます。

Answer 1

Googleはあなた

最初のためのカウントを合計しますgroup()方法を持っている、ちょうどFacebookのデータをに変換され
、Googleは

作業スニペット以下の参照を認識した形式のデータを取得する必要があります通常のアレイ/ Googleデータテーブル

、グループ法は、次に使用することができたの両方の名前とカテゴリ

によってグループ化するために使用されています任意の通常のチャートのDは、
ここでは、テーブルチャートは

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['corechart', 'table'] 
 
}); 
 

 
function drawChart() { 
 
    var fbData = [{"name":"Death Stranding","category":"Video Game","id":"1583509281947417"},{"name":"Ryan Gosling","category":"Artist","id":"246631252031491"},{"name":"The Nice Guys","category":"Movie","id":"1668045260089410"},{"name":"The Tonight Show Starring Jimmy Fallon","category":"TV Show","id":"31732483895"},{"name":"Hardcore Henry","category":"Movie","id":"653090358094272"},{"name":"Bronson","category":"Movie","id":"237617070301"}]; 
 

 
    var gglData = []; 
 
    // loop over fbData array 
 
    for (var i = 0; i < fbData.length; i++) { 
 
    // if first index, load column labels 
 
    if (i === 0) { 
 
     var cols = []; 
 
     // loop over first object properties 
 
     for (var key in fbData[i]) { 
 
     if (fbData[i].hasOwnProperty(key)) { 
 
      // use property name as column heading 
 
      cols.push(key); 
 
     } 
 
     } 
 
     gglData.push(cols); 
 
    } 
 
    var row = []; 
 
    // loop over object properties 
 
    for (var key in fbData[i]) { 
 
     if (fbData[i].hasOwnProperty(key)) { 
 
     // add property value 
 
     row.push(fbData[i][key]); 
 
     } 
 
    } 
 
    gglData.push(row); 
 
    } 
 

 
    var data = google.visualization.arrayToDataTable(gglData); 
 

 
    var groupAll = google.visualization.data.group(
 
    data,  // data table 
 
    [1, 0], // group by columns 
 

 
    // aggregation columns 
 
    [{ 
 
     column: 0, 
 
     aggregation: google.visualization.data.count, 
 
     type: 'number' 
 
    }] 
 
); 
 

 
    var groupName = google.visualization.data.group(
 
    data, 
 
    [0], 
 
    [{ 
 
     column: 0, 
 
     aggregation: google.visualization.data.count, 
 
     type: 'number' 
 
    }] 
 
); 
 

 
    var groupCategory = google.visualization.data.group(
 
    data, 
 
    [1], 
 
    [{ 
 
     column: 1, 
 
     aggregation: google.visualization.data.count, 
 
     type: 'number' 
 
    }] 
 
); 
 

 
    var tableAll = new google.visualization.Table(document.getElementById('table_all')); 
 
    tableAll.draw(data); 
 

 
    var tableGroup = new google.visualization.Table(document.getElementById('table_group')); 
 
    tableGroup.draw(groupAll); 
 

 
    var tableName = new google.visualization.Table(document.getElementById('table_name')); 
 
    tableName.draw(groupName); 
 

 
    var tableCategory = new google.visualization.Table(document.getElementById('table_category')); 
 
    tableCategory.draw(groupCategory); 
 
}

div { 
 
    margin-top: 8px; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="table_all"></div> 
 
<div id="table_group"></div> 
 
<div id="table_name"></div> 
 
<div id="table_category"></div>