我在Angular 2项目中使用angular2-google-chart。但得到了这个错误：
core.umd.js：3491 EXCEPTION：未捕获（承诺）：错误：（SystemJS）GoogleChart未定义 ，ReferenceError：未定义GoogleChart
我做过：npm install angular2-google-chart，npm i angular2-google-chart
还在<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>中添加了cdn index.html。
我想在我的项目中使用字符，请向我推荐一些其他第三方图表实现。 的 profile.component.ts：
import { Component, OnInit,HostBinding } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { slideInDownAnimation } from '../../animations/animations'
@Component({
selector: 'profile-component2',
directives: [GoogleChart],
templateUrl:`../app/components/profile/profile.component.html`,
animations:[slideInDownAnimation]
})
export class ProfileComponent2 implements OnInit {
name="Shubham";
message: string;
@HostBinding('@routeAnimation') routeAnimation = true;
@HostBinding('style.display') display = 'block';
@HostBinding('style.position') position = 'absolute';
public login:{} = {};
private interval:any;
ngOnInit() {
console.log("profile component2 initialized");
}
public line_ChartData = [
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]];
public bubble_ChartData = [
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]];
public scatter_ChartData = [
['Date', 'Sales Percentage'],
[new Date(2016, 3, 22), 78],
[new Date(2016, 3, 21,9,30,2),88],
[new Date(2016, 3, 20), 67],
[new Date(2016, 3, 19,8,34,7), 98],
[new Date(2016, 3, 18,15,34,7),95],
[new Date(2016, 3, 16,7,30,45),89],
[new Date(2016, 3, 16,15,40,35),68]
];
public candle_ChartData = [
['Day','Low','Opening value','Closing value','High'],
['Mon', 28, 28, 38, 38],
['Tue', 38, 38, 55, 55],
['Wed', 55, 55, 77, 77],
['Thu', 77, 77, 66, 66],
['Fri', 66, 66, 22, 22]
];
public pie_ChartData = [
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7] ];
public bar_ChartData = [
['City', '2010 Population', '2000 Population'],
['New York City, NY', 8175000, 8008000],
['Los Angeles, CA', 3792000, 3694000],
['Chicago, IL', 2695000, 2896000],
['Houston, TX', 2099000, 1953000],
['Philadelphia, PA', 1526000, 1517000]];
public line_ChartOptions = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom'
}
};
public bubble_ChartOptions= {
title: 'Correlation between life expectancy, fertility rate ' +
'and population of some world countries (2010)',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {textStyle: {fontSize: 11}}
};
public candle_ChartOptions = {
legend: 'none',
bar: { groupWidth: '100%' }, // Remove space between bars.
candlestick: {
fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green
}
};
public scatter_ChartOptions = {
legend: { position: 'bottom'
}
title: 'Company Sales Percentage',
};
public bar_ChartOptions = {
title: 'Population of Largest U.S. Cities',
chartArea: {width: '50%'},
hAxis: {
title: 'Total Population',
minValue: 0,
textStyle: {
bold: true,
fontSize: 12,
color: '#4d4d4d'
},
titleTextStyle: {
bold: true,
fontSize: 18,
color: '#4d4d4d'
}
},
vAxis: {
title: 'City',
textStyle: {
fontSize: 14,
bold: true,
color: '#848484'
},
titleTextStyle: {
fontSize: 14,
bold: true,
color: '#848484'
}
}
};
public pie_ChartOptions = {
title: 'My Daily Activities'
width: 900,
height: 500
};
}
profile.component.html：
<h1>Profile here- {{name}}</h1>
<div id="line_chart",[chartData]="line_ChartData", [chartOptions] = "line_ChartOptions",chartType="LineChart",GoogleChart/> </div>
<div id="bubble_chart",[chartData]="bubble_ChartData", [chartOptions] = "bubble_ChartOptions",chartType="BubbleChart",GoogleChart/> </div>
<div id="scatter_chart",[chartData]="scatter_ChartData", [chartOptions] = "scatter_ChartOptions",chartType="ScatterChart",GoogleChart/> </div>
<div id="candle_chart",[chartData]="candle_ChartData", [chartOptions] = "candle_ChartOptions",chartType="CandlestickChart",GoogleChart/> </div>
<div id="pie_chart",[chartData]="pie_ChartData", [chartOptions] = "pie_ChartOptions",chartType="PieChart",GoogleChart/> </div>
<div id="bar_chart",[chartData]="bar_ChartData", [chartOptions] = "bar_ChartOptions",chartType="BarChart",GoogleChart/> </div>
答案 0 :(得分：1)
您忘记导入以下GoogleChart！ ：
import {GoogleChart} from './directives/angular2-google-chart.directive';
所以代码将是：
import { Component, OnInit,HostBinding } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { slideInDownAnimation } from '../../animations/animations'
import {GoogleChart} from './directives/angular2-google-chart.directive';
@Component({
selector: 'profile-component2',
directives: [GoogleChart],
templateUrl:`../app/components/profile/profile.component.html`,
animations:[slideInDownAnimation]
})
export class ProfileComponent2 implements OnInit {
name="Shubham";
message: string;
@HostBinding('@routeAnimation') routeAnimation = true;
@HostBinding('style.display') display = 'block';
@HostBinding('style.position') position = 'absolute';
public login:{} = {};
private interval:any;
ngOnInit() {
console.log("profile component2 initialized");
}
public line_ChartData = [
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]];
public bubble_ChartData = [
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]];
public scatter_ChartData = [
['Date', 'Sales Percentage'],
[new Date(2016, 3, 22), 78],
[new Date(2016, 3, 21,9,30,2),88],
[new Date(2016, 3, 20), 67],
[new Date(2016, 3, 19,8,34,7), 98],
[new Date(2016, 3, 18,15,34,7),95],
[new Date(2016, 3, 16,7,30,45),89],
[new Date(2016, 3, 16,15,40,35),68]
];
public candle_ChartData = [
['Day','Low','Opening value','Closing value','High'],
['Mon', 28, 28, 38, 38],
['Tue', 38, 38, 55, 55],
['Wed', 55, 55, 77, 77],
['Thu', 77, 77, 66, 66],
['Fri', 66, 66, 22, 22]
];
public pie_ChartData = [
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7] ];
public bar_ChartData = [
['City', '2010 Population', '2000 Population'],
['New York City, NY', 8175000, 8008000],
['Los Angeles, CA', 3792000, 3694000],
['Chicago, IL', 2695000, 2896000],
['Houston, TX', 2099000, 1953000],
['Philadelphia, PA', 1526000, 1517000]];
public line_ChartOptions = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom'
}
};
public bubble_ChartOptions= {
title: 'Correlation between life expectancy, fertility rate ' +
'and population of some world countries (2010)',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {textStyle: {fontSize: 11}}
};
public candle_ChartOptions = {
legend: 'none',
bar: { groupWidth: '100%' }, // Remove space between bars.
candlestick: {
fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green
}
};
public scatter_ChartOptions = {
legend: { position: 'bottom'
}
title: 'Company Sales Percentage',
};
public bar_ChartOptions = {
title: 'Population of Largest U.S. Cities',
chartArea: {width: '50%'},
hAxis: {
title: 'Total Population',
minValue: 0,
textStyle: {
bold: true,
fontSize: 12,
color: '#4d4d4d'
},
titleTextStyle: {
bold: true,
fontSize: 18,
color: '#4d4d4d'
}
},
vAxis: {
title: 'City',
textStyle: {
fontSize: 14,
bold: true,
color: '#848484'
},
titleTextStyle: {
fontSize: 14,
bold: true,
color: '#848484'
}
}
};
public pie_ChartOptions = {
title: 'My Daily Activities'
width: 900,
height: 500
};
}
Angular 2特定版本存在一些问题。参考：https://github.com/vimalavinisha/angular2-google-chart/issues
文档here
中提到了上述导入