У меня есть базовый html-файл, который создает GeoChart, используя диаграммы Google:
<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', 0, ''],
['India', 2, 'visited'],
['Australia', 4, 'want to visit'],
['Germany', 1, 'homecountry'],
['United States', 2, 'visited'],
['Brazil', 2, 'visited'],
['Canada', 3, 'favorite destination'],
['France', 2, 'visited'],
['Russia', 2, 'visited']
]);
var options = {
backgroundColor: '#17263c',
datalessRegionColor: '#242f3e',
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>
Как вы видите выше, этот GeoChart имеет 3 столбца. Теперь я хочу добавить эту диаграмму в мое угловое приложение, используя angular-google-charts (https://github.com/FERNman/angular-google-charts). Мой код там пока что: Html:
<google-chart #chart
[title]="title"
[type]="type"
[data]="data"
[columnNames]="columnNames"
[options]="options"
style="width: 100%; height: 100%;">
</google-chart>
ts:
type="GeoChart";
columnNames = [
[{type: 'string', role: 'data'}],
[{type: 'number', role: 'data'}]
]
data = [
['India', 2],
['Australia', 4],
['Germany', 1],
['United States', 2],
['Brazil', 2],
['Canada', 3],
['France', 2],
['Russia', 2]
];
options = {
backgroundColor: '#17263c',
datalessRegionColor: '#242f3e',
legend: 'none',
tooltip: {
isHtml: true,
textStyle: {
color: 'black'
}
},
colors: ['#46127A', '#1102BB', '#1633C4', '#3185CE']
};
Эта диаграмма пока имеет только 2 столбца. Если я теперь хочу добавить третий, как показано ниже:
columnNames = [
[{type: 'string', role: 'data'}],
[{type: 'number', role: 'data'}],
[{type: 'string', role: 'tooltip'}]
]
data = [
['India', 2, 'test'],
['Australia', 4, 'test'],
['Germany', 1, 'test'],
['United States', 2, 'test'],
['Brazil', 2, 'test'],
['Canada', 3, 'test'],
['France', 2, 'test'],
['Russia', 2, 'test']
];
Тогда я всегда получаю следующую ошибку:
Incompatible data table: Error: Table contains more columns than expected (Expecting 2 columns)×
Это означает, что GeoCharts принимает только 2 столбца, НО, поскольку есть способ использовать три столбца в базовом html-файле (не используя Angular), я уверен, что должен быть способ сделать это и с помощью Angular, но я незнаю, как.
Я также попробовал это:
<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', 0, ''],
['India', 2, 'visited'],
['Australia', 4, 'want to visit'],
['Germany', 1, 'homecountry'],
['United States', 2, 'visited'],
['Brazil', 2, 'visited'],
['Canada', 3, 'favorite destination'],
['France', 2, 'visited'],
['Russia', 2, 'visited']
];
options = {
backgroundColor: '#17263c',
datalessRegionColor: '#242f3e',
legend: 'none',
tooltip: {
isHtml: true,
textStyle: {
color: 'black'
}
},
colors: ['#46127A', '#1102BB', '#1633C4', '#3185CE']
};
но это дало мне следующую ошибку:
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)
Я был бы очень рад, если бы кто-томогли бы подсказать, как добавить 3. колонку. Спасибо!