开发者问题收集

如何重写 google geo chart 的代码以便与 angular (angular-google-charts) 一起使用？

2019-11-07
1000
angular charts google-visualization

我开始在一个简单的 html 文件中尝试使用 google-charts，实际上我得到了我想要的结果。为此，我使用了很多“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 { }）

编辑：我在上面的代码中添加了一些内容来获得第 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个回答

您可以将列标题作为数据的一部分传递... 

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。
false 是默认值，因此如果您已在某处将其设置为 true，只需将其删除即可... 

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

至于 css，您可以像平常一样将其包含在 html 中...

WhiteHat
2019-11-08

我现在找到了一种方法： 我没有使用 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'.

但这基本上只是告诉我我的选项不正确，但在页面视图中一切都显示正确。

UnknownInnocent
2019-11-08