Я пытаюсь использовать API GeoCharts (часть Google Charts) в моем Angular компоненте. Указанный код c, на который я ссылаюсь для этой цели: https://developers.google.com/chart/interactive/docs/gallery/geochart#coloring -your-chart .
Я использую пакет Angular-Google-Charts, как указано здесь: https://www.npmjs.com/package/angular-google-charts
В частности, я хочу иметь возможность отображать диаграмму нескольких стран в моем шаблоне HTML, в котором каждая страна будет выделена различным оттенком или цветом, как вы можете видеть по указанной ссылке.
Я попытался использовать код в документации API, что приводит меня к этой ошибке:
ERROR Error: Uncaught (in promise): ReferenceError: google is not defined
ReferenceError: google is not defined
at new GeoChartsComponent (geo-charts.component.ts:52)
at createClass (core.js:31985)
at createDirectiveInstance (core.js:31807)
at createViewNodes (core.js:44210)
at createRootView (core.js:44082)
at callWithDebugContext (core.js:45632)
at Object.debugCreateRootView [as createRootView] (core.js:44848)
at ComponentFactory_.create (core.js:30788)
at ComponentFactoryBoundToModule.create (core.js:25731)
at ViewContainerRef_.createComponent (core.js:30995)
at resolvePromise (zone-evergreen.js:797)
at resolvePromise (zone-evergreen.js:754)
at zone-evergreen.js:858
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:39680)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
at Zone.runTask (zone-evergreen.js:168)
at drainMicroTaskQueue (zone-evergreen.js:559)
Вот код в моем GeoChartsComponent:
export class GeoChartsComponent implements OnInit {
constructor() { }
ngOnInit() {
google.charts.load('current', { 'packages': ['geochart']});
google.charts.setOnLoadCallback(this.drawRegionsMap);
}
drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Latitude'],
['Algeria', 36], ['Angola', -8], ['Benin', 6], ['Botswana', -24],
['Burkina Faso', 12], ['Burundi', -3], ['Cameroon', 3],
['Canary Islands', 28], ['Cape Verde', 15],
['Central African Republic', 4], ['Ceuta', 35], ['Chad', 12],
['Comoros', -12], ['Cote d\'Ivoire', 6],
['Democratic Republic of the Congo', -3], ['Djibouti', 12],
['Egypt', 26], ['Equatorial Guinea', 3], ['Eritrea', 15],
['Ethiopia', 9], ['Gabon', 0], ['Gambia', 13], ['Ghana', 5],
['Guinea', 10], ['Guinea-Bissau', 12], ['Kenya', -1],
['Lesotho', -29], ['Liberia', 6], ['Libya', 32], ['Madagascar', null],
['Madeira', 33], ['Malawi', -14], ['Mali', 12], ['Mauritania', 18],
['Mauritius', -20], ['Mayotte', -13], ['Melilla', 35],
['Morocco', 32], ['Mozambique', -25], ['Namibia', -22],
['Niger', 14], ['Nigeria', 8], ['Republic of the Congo', -1],
['Réunion', -21], ['Rwanda', -2], ['Saint Helena', -16],
['São Tomé and Principe', 0], ['Senegal', 15],
['Seychelles', -5], ['Sierra Leone', 8], ['Somalia', 2],
['Sudan', 15], ['South Africa', -30], ['South Sudan', 5],
['Swaziland', -26], ['Tanzania', -6], ['Togo', 6], ['Tunisia', 34],
['Uganda', 1], ['Western Sahara', 25], ['Zambia', -15],
['Zimbabwe', -18]
]);
}
options = {
region: '002', // Africa
colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
backgroundColor: '#81d4fa',
datalessRegionColor: '#f8bbd0',
defaultColor: '#f5f5f5',
};
chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
chart.draw(data, options); // this line fails to compile with multiple errors.
Мой HTML шаблон для того же компонента просто содержит:
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;">
</div>
Могу ли я получить некоторую помощь в работе моего кода?
Также вот StackBlitz, который я создал на всякий случай, если вы предпочитаете: https://stackblitz.com/edit/angular-lamnq7