我开始在一个简单的html文件中处理google-charts，实际上得到了我一直想要的结果。为此，我使用了很多“ google .....”方法。现在，我想在我的Angular-Application（带有angular-google-charts）中使用此代码，为此，我不得不转换我的代码。
我的html文件：
<html>
<head>
<style>
.google-visualization-tooltip {
width: 150px !important;
background-color: #515152 !important;
position: absolute !important;
color: white;
}
</style>
<!--================================================================================================-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current',{
'packages':['geochart'],'mapsApiKey': 'myKey'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string','Country');
dataTable.addColumn('number','amount');
dataTable.addColumn({type: 'string',role: 'tooltip'})
dataTable.addRows([
['Country',''],['India',2,'visited'],['Australia',4,'want to visit'],['Germany',1,'homecountry'],['United States',['Brazil',['Canada',3,'favorite destination'],['France',['Russia','visited']
]);
var options = {
backgroundColor: '#17263c',datalessRegionColor: '#242f3e',/*legend: {
textStyle: {
color: 'blue',fontSize: '16'
}
},*/
legend: 'none',tooltip: {
isHtml: true,textStyle: {
color: 'white'
}
},colors: ['#46127A','#1102BB','#1633C4','#3185CE']
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(dataTable,options);
}
</script>
<!--================================================================================================-->
</head>
<body>
<div id="regions_div" style="width: 100%; height: 100%;"></div>
</body>
</html>
这就是我已经拥有的：
<google-chart #chart
[title]="title"
[type]="type"
[data]="data"
[columnNames]="columnNames"
[options]="options"
[firstRowIsData]="false"
style="width: 100%; height: 100%;">
</google-chart>
type="GeoChart";
data = [
['Country','amount',{type: 'string',role: 'tooltip'}],['Country','visited']
];
options = {
backgroundColor: '#17263c',legend: 'none',tooltip: {
isHtml: true,textStyle: {
color: 'black'
}
},'#3185CE']
};
现在我不知道如何为图表定义3.列，我可以在其中设置工具提示，也不知道如何添加CSS。因为这个谷歌很多。 ...我以为我必须从“我不知道在哪里”导入{google}，那时我真的不知道如何使用它。
如果有人可以给我一个例子，我会很高兴 1.允许我创建3列的图表数据（与第一个代码段相同），并且 2.允许我使用CSS（.google-visualization-tooltip {}）
编辑：我在上面的代码中添加了一些内容来获取3.列，现在出现了这个错误：
core.js:9110 ERROR Error: Unknown type of value in 0,2
at gvjs_Rba (jsapi_compiled_default_module.js:130)
at Object.gvjs_Eo [as arrayToDataTable] (jsapi_compiled_default_module.js:130)
at GoogleChartComponent.updateChart (angular-google-charts.js:266)
at SafeSubscriber._next (angular-google-charts.js:473)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:185)
at SafeSubscriber.next (Subscriber.js:124)
at Subscriber._next (Subscriber.js:72)
at Subscriber.next (Subscriber.js:49)
at angular-google-charts.js:89
at ZoneDelegate.invoke (zone-evergreen.js:359)
谢谢！