Question

我在谷歌可视化中制作了一个地理地图，它可以正常使用JavaScript，但我需要能够动态更新，所以需要用JSON创建数据。

这是我想用JSON复制的js：

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

我已经阅读了大约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}]}
      ]
}

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

Answer 1

我尽力解释它。

{
  // 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}]}
      ]
}

Answer 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在此处提供了指南：Follow this link for details

如何在Google Visualization Geo Map中使用JSON

2 个答案: