0

我正在尝试在 angular2 和 typescript 中创建 Google 柱形图。但我得到错误属性图表不存在于 google 柱形图中的类型“typeof google”上。当我运行命令 npm start 时，它显示错误。这是我的代码

google.charts.load('44', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawColColors);

function drawColColors() {
      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Motivation Level');
      data.addColumn('number', 'Energy Level');

      data.addRows([
            [{v: [8, 0, 0], f: '8 am'}, 10, 7,],
            [{v: [9, 0, 0], f: '9 am'}, 6, 8],
            [{v: [10, 0, 0], f:'10 am'}, 3, 9],
            [{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
            [{v: [10, 0, 0], f:'10 am'}, 3, 8],
            [{v: [11, 0, 0], f: '11 am'}, 4, 6],
      ]);

      var options = {
            colors: ['#9575cd', '#33ac71','#FF0000','#FFFF00'],
            legend: 'none',
            bar: {groupWidth: "80%"},
            hAxis: {
                 textPosition: 'none',
                  gridlineColor: '#fff',
            },
            vAxis: {
             //baselineColor: '#fff',
             gridlineColor: '#fff',
             textPosition: 'none'

            }
      };

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
          chart.draw(data, options);
        }

我收到以下错误。请帮助我如何解决。

    D:\Veraction1st\ows-veraction-repo>npm start

    > angular2-app@0.0.0 start D:\Veraction1st\ows-veraction-repo
    > gulp serve.dev --color

    [15:11:24] Requiring external module ts-node/register
    TSError: ? Unable to compile TypeScript
    app\pages\item-details\components\item_details.ts (113,8): Property 'charts' doe
    s not exist on type 'typeof google'. (2339)
    app\pages\item-details\components\item_details.ts (114,8): Property 'charts' doe
    s not exist on type 'typeof google'. (2339)
    app\pages\item-details\components\item_details.ts (152,44): Property 'ColumnChar
    t' does not exist on type 'typeof visualization'. (2339)
        at getOutput (D:\Veraction1st\ows-veraction-repo\node_modules\ts-node\src\ts
    -node.ts:210:13)
        at Object.loader (D:\Veraction1st\ows-veraction-repo\node_modules\ts-node\sr
    c\ts-node.ts:225:23)
        at Module.load (module.js:458:32)
        at tryModuleLoad (module.js:417:12)
        at Function.Module._load (module.js:409:3)
        at Module.require (module.js:468:17)
        at require (internal/module.js:20:19)
        at Liftoff.handleArguments (D:\Veraction1st\ows-veraction-repo\node_modules\
    gulp\bin\gulp.js:116:3)
        at Liftoff.<anonymous> (D:\Veraction1st\ows-veraction-repo\node_modules\lift
    off\index.js:198:16)
        at module.exports (D:\Veraction1st\ows-veraction-repo\node_modules\flagged-r
    espawn\index.js:17:3)

    npm ERR! Windows_NT 6.3.9600
    npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\
    node_modules\\npm\\bin\\npm-cli.js" "start"
    npm ERR! node v6.3.1
    npm ERR! npm  v3.10.3
    npm ERR! code ELIFECYCLE
    npm ERR! angular2-app@0.0.0 start: `gulp serve.dev --color`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the angular2-app@0.0.0 start script 'gulp serve.dev --color'.

    npm ERR! Make sure you have the latest version of node.js and npm installed.
    npm ERR! If you do, this is most likely a problem with the angular2-app package,

    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR!     gulp serve.dev --color
    npm ERR! You can get information on how to open an issue for this project with:
    npm ERR!     npm bugs angular2-app
    npm ERR! Or if that isn't available, you can get their info via:
    npm ERR!     npm owner ls angular2-app
    npm ERR! There is likely additional logging output above.

    npm ERR! Please include the following file with any support request:
    npm ERR!     D:\Veraction1st\ows-veraction-repo\npm-debug.log
4

1 回答 1

3

尝试添加

declare let google:any

在您的组件声明之前：

import { Component } from '@angular/core'

declare let google:any

@Component({
    selector:'your-selector',
    template: '<div id="chart_div"></div>'
})
export class YourComponent implements OnInit {


}
于 2017-05-17T10:09:39.290 回答