如何在谷歌Geochart在Angular4添加標籤各省

我使用谷歌圖表 https://github.com/vimalavinisha/angular2-google-chart 如何在谷歌Geochart在Angular4添加標籤各省

例如省圖表：

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>

是否有可能顯示的名稱和除了工具提示之外，省內的價值是多少？

UPDATE 使用這種顯示一個空的地圖：

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得到了谷歌地圖API密鑰和包括

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

來源

2017-07-31 Guus

使用選項 - >displayMode: 'text' - 將應用標籤
標籤加載緩慢，但真的出現......

然而，這也將移動的顏色標籤，
，從外省去除背景顏色...

看到下面的工作片段...

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); 
 
};

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

來源

2017-08-01 11:23:18 WhiteHat

啊。 'displayMode：「text」'的確是答案。我缺少的是獲取Google地圖的API密鑰。我得到它後，激活它的標籤顯示。 – Guus

如何在谷歌Geochart在Angular4添加標籤各省

回答

相關問題