Question

我正在尝试（并且失败）使用Google的可视化代码来创建交互式地图。当我将鼠标悬停在美国州时，我希望将数值格式化为包含美元符号。

这是我的地图代码，有人可以告诉我我做错了什么吗？

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['State', 'Dollars'],
    ['US-IL', 200],
    ['US-IN', 300],
    ['US-AL', 200],
    ['US-AZ', 800],

  ]);

  var geochart = new google.visualization.GeoChart(
      document.getElementById('visualization'));
  geochart.draw(data, {width: 556, height: 347, region: "US", resolution: "provinces"});
}

Answer 1

对于处于悬停状态的数据的美元符号，您需要告诉Geochart系统使用特定前缀格式化数据。如果您需要百分比，则可以使用百分比符号添加后缀。请参阅下面的Google API文档。

Google API文档：https://developers.google.com/chart/interactive/docs/reference#numberformatter

在您的情况下，要使用的两行代码是：

// Add the prefix (and set the decimal places) 
var formatter = new google.visualization.NumberFormat({prefix: '$', fractionDigits: 0});

// Apply formatter to second column
formatter.format(data, 1);

因此，您的代码将如下所示：

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['State', 'Dollars'],
    ['US-IL', 200],
    ['US-IN', 300],
    ['US-AL', 200],
    ['US-AZ', 800],
  ]);


// --- Code to add --- 
var formatter = new google.visualization.NumberFormat({prefix: '$', fractionDigits: 0});
formatter.format(data, 1);
// --- End of Code to add ---


  var geochart = new google.visualization.GeoChart(
      document.getElementById('visualization'));
  geochart.draw(data, {width: 556, height: 347, region: "US", resolution: "provinces"});
}

遇到交互式地图时出现问题

1 个答案: