Question

我有一个连接到Google电子表格的Google Geochart。该图表的目的是显示我们州和他们所在州的不同类别的大学。我已在电子表格中指定了值，以便为地图指定适当的标记颜色以表示类别。

我的问题是表示类型（数字）的文本显示在工具提示中。（例如：工具提示显示“ABC大学类型3”。我需要隐藏此文本，或者根据条件逻辑创建一个字符串，以便例如类型3在工具提示中转换为“XYZ系统”。您认为哪个？是更好的方法，你能提供如何做到这一点的指导吗？

    <html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script>
    google.charts.load('current', { 'packages': ['geochart'] });
    google.charts.setOnLoadCallback(drawMap);

    function drawMap() {
        var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet3");
        query.send(handleQueryResponse);
    }

function handleQueryResponse(response) {var data = response.getDataTable();
    var options = {
        //showTip: true, 
        mapType: 'styledMap', 
        useMapTypeControl: true,
        resolution: 'provinces',
        //displayMode: 'text',
        //magnifyingGlass: {'enable': true, 'zoomFactor': '7'},
        region: 'US-KY',
        keepAspectRatio: true,
        legend: 'none',
        sizeAxis: { minValue: 1, maxValue: 3, minSize: 10, maxSize: 10 },
        colorAxis: {colors: ['green', 'blue', 'purple'], values: [1, 2, 3]},
        markerOpacity: 0.75,
        tooltip: {showColorCode: false, isHTML: true, textStyle:{fontSize: 21}},
        dataMode: 'markers'
    };

    var map = new google.visualization.GeoChart(document.getElementById('chart_div'));

    map.draw(data, options);
  };
  </script>
  <style type="text/css">
  html, body {height: 100%;}
  #chart_div {width: 100%; height: 100%;}
  </style>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Answer 1

您可以使用DataView Class更改“类型”列的格式化值。

例如，DataTable中Type类型的值如下所示...
{"v":3.0,"f":"3"}

使用DataView，将其更改为此...
{"v":3.0,"f":"XYZ System"}

我们还可以删除列标签，以避免在工具提示中看到它。

参见以下示例...

google.charts.load('current', {
  callback: drawMap,
  packages: ['geochart']
});

function drawMap() {
  var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet3");
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  var data = response.getDataTable();

  // setup school type array
  var schoolTypes = [
    'ABC System',
    'LMO System',
    'XYZ System'
  ];

  // create DataView from DataTable
  var view = new google.visualization.DataView(data);
  
  // set view columns, keep first three columns
  // use calculated column for Type
  view.setColumns([0, 1, 2, {
    type: 'number',
    label: '',
    calc: function (dataTable, rowIndex) {
      return {
        v: dataTable.getValue(rowIndex, 3),
        // get school type from array
        f: schoolTypes[dataTable.getValue(rowIndex, 3) - 1]
      }
    }
  }]);

  var options = {
    //showTip: true,
    mapType: 'styledMap',
    useMapTypeControl: true,
    resolution: 'provinces',
    //displayMode: 'text',
    //magnifyingGlass: {'enable': true, 'zoomFactor': '7'},
    region: 'US-KY',
    keepAspectRatio: true,
    legend: 'none',
    sizeAxis: { minValue: 1, maxValue: 3, minSize: 10, maxSize: 10 },
    colorAxis: {colors: ['green', 'blue', 'purple'], values: [1, 2, 3]},
    markerOpacity: 0.75,
    tooltip: {showColorCode: false, isHTML: true, textStyle:{fontSize: 21}},
    dataMode: 'markers'
  };

  var map = new google.visualization.GeoChart(document.getElementById('chart_div'));
  map.draw(view, options);
};

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

另请注意 - 建议每页仅包含loader.js和jsapi

隐藏Google GeoChart工具提示中的文字

1 个答案: