如何使用JSON与谷歌可视化地理图?

I've made a Geo Map in Google Visualization, and it works fine with JavaScript, but I need to be able to update on the fly, so need to create the data in JSON.

我在谷歌可视化中做了一个Geo Map，它对JavaScript很好用，但是我需要能够动态更新，所以需要用JSON创建数据。

This is the js that I want to replicate in JSON:

这是我要在JSON中复制的js:

var data = google.visualization.arrayToDataTable([
  ['Country', 'Popularity'],
  ['Germany', 200],
  ['United States', 300],
  ['Brazil', 400],
  ['Canada', 500],
  ['France', 600],
  ['RU', 700]
]);

I've read the documentation about 10 times, and I don't understand how to build the above to be in the Google's example format:

我已经阅读了大约10次文档，我不理解如何将上面的内容构建为谷歌的示例格式:

{
  "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
      ]
}

I don't know what the "c", "v", "f", and "pattern" are so don't understand how create this for a Geo Map. If anyone has any ideas, I'd be greatly appreciative!!

我不知道“c”、“v”、“f”和“pattern”是什么，所以不明白如何为Geo地图创建这个。如果有人有什么想法，我会非常感激的!!

2 个解决方案

#1

I tried to explain it as well as I could.

我试着尽我所能地解释它。

{
  // The 'cols' array contains all the columns of your chart.
  "cols": [
        { // This object describes the first column.
          // The first column has an empty string for its id, the label 'Topping',
          // and the type 'string'. The 'pattern' is optional.
          "id": "",
          "label": "Topping",
          "pattern": "",
          "type": "string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  // The 'rows' array contains all the rows of your chart.
  "rows": [
        // Each row object must have a 'c' property, which is an array of cells
        // Each cell has a 'v' value and an 'f' value.
        // The 'v' value contains the actual value of the cell.
        // The 'f' value contains the formatted value of the cell.
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
      ]
}

#2

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

function drawChart() {
  var jsonData = $.ajax({ 
      url: "getData.php",
      dataType:"json",
      async: false
      }).responseText;

  // Create our data table out of JSON data loaded from server.
  var data = new google.visualization.DataTable(jsonData);

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, {width: 400, height: 240});
}

Google has a guide here: Follow this link for details

谷歌在这里有一个指南:关注这个链接的细节。

#1