Question

我在Angular4中使用Google Charts https://github.com/vimalavinisha/angular2-google-chart

示例省份图表：

  public map_ChartData = [
    ['Provinces',   'Popularity'],
         [{ v: 'NL-DR', f: 'Drenthe' },  5],
         [{ v: 'NL-NH', f: 'Noord-Holland' },  1000],
         [{ v: 'NL-UT', f: 'Utrecht' },  800],
         [{ v: 'NL-FL', f: 'Flevoland' },  200],
         [{ v: 'NL-FR', f: 'Friesland' },  350],
         [{ v: 'NL-GE', f: 'Gelderland' },  450],
         [{ v: 'NL-GR', f: 'Groningen' },  788],
         [{ v: 'NL-LI', f: 'Limburg' },  244],
         [{ v: 'NL-NB', f: 'Noord-Brabant' },  750],
         [{ v: 'NL-OV', f: 'Overijssel' },  620],
         [{ v: 'NL-ZE', f: 'Zeeland' },  50],
         [{ v: 'NL-ZH', f: 'Zuid-Holland' },  890]
      ];

  public map_ChartOptions = {
    region: 'NL', resolution: 'provinces',
    colorAxis: {
      minValue: 0,
      maxValue: 1000,      
      colors: ['grey', 'yellow', 'orange', 'blue', 'green']
    }};


<div id="map_chart" 
(itemSelect)="itemSelected($event)" 
(itemDeselect)="itemDeselected($event)" 
[chartData]="map_ChartData"
[chartOptions]="map_ChartOptions" 
chartType="GeoChart" 
GoogleChart></div>

是否可以在工具提示中显示省内的名称和值？

更新使用它会显示一个空地图：

  public map_ChartOptions = {
    region: 'NL', resolution: 'provinces', displayMode: 'text',
    colorAxis: {
      minValue: 0,
      maxValue: 1000,      
      colors: ['grey', 'yellow', 'orange', 'blue', 'green']
    }};

更新2：

我很遗憾在https://developers.google.com/maps/documentation/javascript/get-api-key#step-1-get-an-api-key-from-the-google-api-console获取Google地图的API密钥并包含

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
  type="text/javascript"></script>

Answer 1

使用选项 - ＆gt; displayMode: 'text' - 将应用标签
标签加载缓慢但确实出现......

然而，这也会将颜色移动到标签上，
并删除各省的背景颜色......

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  callback: drawChart,
  packages: ['geochart'],
  mapsApiKey: 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Provinces',   'Popularity'],
    [{ v: 'NL-DR', f: 'Drenthe' },  5],
    [{ v: 'NL-NH', f: 'Noord-Holland' },  1000],
    [{ v: 'NL-UT', f: 'Utrecht' },  800],
    [{ v: 'NL-FL', f: 'Flevoland' },  200],
    [{ v: 'NL-FR', f: 'Friesland' },  350],
    [{ v: 'NL-GE', f: 'Gelderland' },  450],
    [{ v: 'NL-GR', f: 'Groningen' },  788],
    [{ v: 'NL-LI', f: 'Limburg' },  244],
    [{ v: 'NL-NB', f: 'Noord-Brabant' },  750],
    [{ v: 'NL-OV', f: 'Overijssel' },  620],
    [{ v: 'NL-ZE', f: 'Zeeland' },  50],
    [{ v: 'NL-ZH', f: 'Zuid-Holland' },  890]
  ]);

  var options = {
    displayMode: 'text',
    region: 'NL',
    resolution: 'provinces',
    colorAxis: {
      minValue: 0,
      maxValue: 1000,
      colors: ['grey', 'yellow', 'orange', 'blue', 'green']
    }
  };

  var chart = new google.visualization.GeoChart(document.getElementById('chart'));
  chart.draw(data, options);
};

＆＃13;

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

＆＃13;

如何在Google Geochart中的省份中添加标签

1 个答案: