Как переписать код географической карты Google, чтобы использовать его с угловыми (angular-google-charts)? - PullRequest
Новая
       8

Как переписать код географической карты Google, чтобы использовать его с угловыми (angular-google-charts)?

1 голос
/ 08 ноября 2019

Я начал играть с Google-чартами в простом html-файле, и я действительно получил результат, который искал. Для этого я использовал много методов "Google. ....". Теперь я хочу использовать этот код в своем Angular-приложении (с 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', 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: {
        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', 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']
  };

Теперь я не знаю, как определить 3. столбец для диаграммы, где я могу установить всплывающую подсказку и нене знаю, как добавить CSS. Потому что есть много этого Google. ... я подумал, что мне нужно импортировать {google} из "я не знаю, где", и тогда я не знал бы, как его использовать.

Я был бы очень рад, если бы кто-то мог датьмне пример, который 1. позволяет мне создавать данные диаграммы с 3 столбцами (как в первом фрагменте кода), а 2. позволяет мне использовать CSS (.google-visualization-tooltip {})

Edit: я добавил что-то, чтобы получить 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)

Спасибо!

Ответы [ 2 ]

0 голосов
/ 08 ноября 2019

Теперь я нашел способ: я не использовал библиотеку angular-google-charts. Для этого я добавил скрипт в intex.html: 

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

В component.html я в основном написал это: 

<div id="regions_div" style="width: 100%; height: 100%;"></div>

А в component.ts я использовал метод ngOnInit-Methodдля этого: 

ngOnInit() {

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: 'black'
  }
},
colors: ['#46127A', '#1102BB', '#1633C4', '#3185CE']
};

var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

chart.draw(dataTable, options);
}

Теперь при компиляции появляется ошибка: 

 ERROR in src/app/components/chart/chart.component.ts(65,27): error TS2345: Argument of type '{ backgroundColor: string; datalessRegionColor: string; legend: string; tooltip: { isHtml: boolean; textStyle: { color: string; }; }; colors: string[]; }' is not assignable to parameter of type 'GeoChartOptions'.
  Types of property 'legend' are incompatible.
    Type 'string' is not assignable to type '"none" | ChartLegend'.

Но это в основном просто говорит мне, что мои параметры неверны, но в представлении настраница все равно отображается правильно.

0 голосов
/ 08 ноября 2019

вы можете передавать заголовки столбцов как часть данных ... 

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']      
];

при передаче заголовков столбцов есть свойство (firstRowIsData), которое должно быть ложным.
false isпо умолчанию, так что если вы где-то установили его в true, просто удалите его ... 

<raw-chart [firstRowIsData]="true"></raw-chart>

как для css, вы можете включить его в свой html как обычно ...

...