![](/img/trans.png)
[英]In Google Chart geochart Tooltip does't show all values and marker color has changed
[英]google geochart marker size and color
這是一個兩部分的問題。
首先,當要繪制的點僅是城市且沒有人口或規模與之相關時,是否可以更改Google Geochart上標記的大小? 我只是列出沒有附加價值的城市,而所有Google的示例都附加了某種人口。
例如,谷歌使用這段代碼,標記的大小由總體反映出來。
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Population', 'Area'],
['Rome', 2761477, 1285.31],
['Milan', 1324110, 181.76],
['Naples', 959574, 117.27],
['Turin', 907563, 130.17],
['Palermo', 655875, 158.9],
['Genoa', 607906, 243.60],
['Bologna', 380181, 140.7],
['Florence', 371282, 102.41]
]);
有沒有任何方法可以改變標記的大小,而無需按某種區域或人口來設置?
其次,由於我沒有標記大小的數字(只有城市名稱),如何更改標記的顏色? 據我了解,colorAxis基於與所繪制城市相關的數字。
colorAxis: {colors: ['green', 'blue']}
這是指向API文檔的鏈接https://developers.google.com/chart/interactive/docs/gallery/geochart
通過一些調整,您可以做到這一點。
看看我創建的一些示例:
http://cmoreira.net/interactive-world-maps-demo/svg-maps-of-the-states-in-usa/
要更改顏色,您應該執行以下操作:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Value');
data.addColumn({type:'string', role:'tooltip'});
data.addRows([[{v:"Olympia Washington",f:"Olympia"},1,"Capital city of the state of Washington"],[{v:"Seattle Washington",f:"Seattle"},2,"Largest city of the state of Washington"],[{v:"Spokane Washington",f:"Spokane"},3,"Seconde Largest city of the state of Washington"],[{v:"Vancouver Washington",f:"Vancouver"},4,"Fourth largest city of the state of Washington"],]);
var options = { colorAxis: {minValue: 1, maxValue:4, colors: ['#4A9928','#204DA8','#992F1A','#2292C9',]},
(...)
因此,您增加一個數字,並給出盡可能多的不同顏色以匹配值。
要更改大小,我沒有進行測試,但是我猜想,如果您使用以下值,也可以使用類似的方法:
sizeAxis: {minValue: 1, maxValue:4,minSize:1, maxSize: 4}
據我從文檔中了解到,您無法直接在Google Geochart中定義標記的顏色和大小。 我建議您嘗試另一種解決方案-jVectorMap 。 使用markers
參數定義標記時,可以為每個標記設置大小和填充顏色,也可以使用markerDefaults
定義默認參數。
/*Code for geo chart configuration option*/
$scope.geoChartConfig = function (data, regionName) {
$scope.chart = {};
$scope.chart.type = "GeoChart";
$scope.chart.data = data
$scope.chart.options = {
// width: 800,
// height: 500,
resolution: 'provinces', //code to set city wise data
region: regionName,
sizeAxis: {
// minValue: 1, //code to set min and max values in geo chart
// maxValue: 4,
minSize: 4, //code to set min and max marker size
maxSize: 4
},
// markerOpacity:1,//code to set opacity or transparancy of chart
displayMode: 'auto', //auto, chart will automatically detect data set whether it is regions or points
keepAspectRatio: true, // code to set max size of chart according to div size html
backgroundColor: '#eaf9ff',
datalessRegionColor: 'white',
defaultColor: '#f5f5f5',
colorAxis: {
colors: ['#1f77b4', '#55FF00', 'red'] //, '#ff0505'
},
};
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.