Html Chart.js不以Angular2显示,如果它不显示';在主页上不存在
每当我将图表转储到主app.component.html时,它看起来都很好,但当我在子组件中使用它并将应用程序路由到它时,图表就不会显示。在inspector窗口中,它将元素显示为具有0高度和0宽度。有人能解决这个问题吗 以下是我的app.component.ts的代码:Html Chart.js不以Angular2显示,如果它不显示';在主页上不存在,html,canvas,typescript,angular,Html,Canvas,Typescript,Angular,每当我将图表转储到主app.component.html时,它看起来都很好,但当我在子组件中使用它并将应用程序路由到它时,图表就不会显示。在inspector窗口中,它将元素显示为具有0高度和0宽度。有人能解决这个问题吗 以下是我的app.component.ts的代码: import {Component} from 'angular2/core'; import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; import
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HomeComponent} from './home.component';
import {ProfileComponent} from './profile.component';
import {HoursComponent} from './hours.component';
import {SettingsComponent} from './settings.component';
import {TaskComponent} from './task.component';
import {ChartDirective} from './chart.directive';
@Component({
selector: 'track-me',
templateUrl: 'app/app.component.html',
directives: [ROUTER_DIRECTIVES,ChartDirective]
})
@RouteConfig([
{ path: '/', component: HomeComponent, name: 'Home' },
{ path: '/home', component: HomeComponent, name: 'Home' },
{ path: '/profile', component: ProfileComponent, name: 'Profile' },
{ path: '/hours', component: HoursComponent, name: 'Hours' },
{ path: '/settings', component: SettingsComponent, name: 'Settings' },
{ path: '/task', component: TaskComponent, name: 'Task' },
])
export class AppComponent { }
import {Component} from 'angular2/core';
import {ChartDirective} from './chart.directive';
import {TopicsComponent} from './topics.component';
@Component({
selector: 'home',
templateUrl: 'app/home.component.html',
directives: [TopicsComponent, ChartDirective]
})
export class HomeComponent { }
import {Component, DynamicComponentLoader, Injector} from 'angular2/core';
import {TopicsComponent} from './topics.component';
import {CanvasComponent} from './canvas.component';
@Component({
selector: 'home',
templateUrl: 'app/home.component.html',
directives: [TopicsComponent, CanvasComponent]
})
export class HomeComponent {
constructor(dcl: DynamicComponentLoader, injector: Injector) {
dcl.loadAsRoot(CanvasComponent, '#chartInsert', injector);
}
}
以下是我的app.component.html代码:
<ul class="nav navmenu-nav">
<li><a [routerLink]="['/Home']">Home</a></li>
<li><a [routerLink]="['/Profile']">Profile</a></li>
<li><a [routerLink]="['/Hours']">Set Hours</a></li>
<li><a [routerLink]="['/Settings']">Settings</a></li>
<li><a [routerLink]="['/Task']">Completed Task</a></li>
</ul>
<router-outlet></router-outlet>
<canvas id="myChart" chart height="250" width="350"></canvas>
<div class="container details-container">
<topics></topics>
</div>
<div class="graph-container">
<div class="row no-pad" style="position: relative;">
<div style="margin-left:14px; z-index: 100; height: 250px;">
<canvas id="myChart" chart height="250" width="350"></canvas>
</div>
<div class="vaxis-bar"></div>
</div><!--/row-->
<div class="row">
<div class="col-sm-12 text-center bottom-row">
HOURS(9)
</div>
</div>
</div>
这是my home.component.html:
<ul class="nav navmenu-nav">
<li><a [routerLink]="['/Home']">Home</a></li>
<li><a [routerLink]="['/Profile']">Profile</a></li>
<li><a [routerLink]="['/Hours']">Set Hours</a></li>
<li><a [routerLink]="['/Settings']">Settings</a></li>
<li><a [routerLink]="['/Task']">Completed Task</a></li>
</ul>
<router-outlet></router-outlet>
<canvas id="myChart" chart height="250" width="350"></canvas>
<div class="container details-container">
<topics></topics>
</div>
<div class="graph-container">
<div class="row no-pad" style="position: relative;">
<div style="margin-left:14px; z-index: 100; height: 250px;">
<canvas id="myChart" chart height="250" width="350"></canvas>
</div>
<div class="vaxis-bar"></div>
</div><!--/row-->
<div class="row">
<div class="col-sm-12 text-center bottom-row">
HOURS(9)
</div>
</div>
</div>
小时(9)
最后,这是我的chart.directive.ts:
/// <reference path="../node_modules/chart.js/chart.d.ts" />
import {Directive, ElementRef, Renderer, Input} from 'angular2/core';
@Directive({
selector: '[chart]'
})
export class ChartDirective {
constructor(el: ElementRef, renderer: Renderer) {
//el.nativeElement.style.backgroundColor = 'yellow';
var data = {
labels: ["", "", "", "", "", "", "", "", ""],
datasets: [
{
label: "Track Me",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(13,220,138,1)",
pointColor: "rgba(13,220,138,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [1, 3, 13, 7, 0, 5, 9, 2, 5]
}
]
};
var opts = {
pointDot: false, scaleFontColor: "#50728d", scaleShowLabels: true, responsive: false, scaleLineColor: "rgba(255,255,255,.3)"
};
var ctx: any = el.nativeElement.getContext("2d");
var lineChart = new Chart(ctx);
////var lineChartOptions = areaChartOptions;
////lineChartOptions.datasetFill = false;
lineChart.Line(data,opts);
}
}
//
从'angular2/core'导入{Directive,ElementRef,Renderer,Input};
@指示({
选择器:“[图表]”
})
导出类图表指令{
构造函数(el:ElementRef,渲染器:渲染器){
//el.nativeElement.style.backgroundColor='黄色';
风险值数据={
标签:[、、、、、、、、、、、、、、、、、、],
数据集:[
{
标签:“跟踪我”,
填充颜色:“rgba(220220,0.2)”,
strokeColor:“rgba(13220138,1)”,
pointColor:“rgba(13220138,1)”,
pointStrokeColor:“fff”,
pointHighlightFill:“fff”,
pointHighlightStroke:“rgba(2201)”,
数据:[1,3,13,7,0,5,9,2,5]
}
]
};
变量选项={
pointDot:false,scaleFontColor:#50728d,scaleShowLabels:true,responsive:false,scaleLineColor:“rgba(255255,.3)”
};
var ctx:any=el.nativeElement.getContext(“2d”);
var线形图=新图表(ctx);
////var lineChartOptions=区域图表选项;
////lineChartOptions.datasetFill=false;
线条图。线条(数据、选项);
}
}
好的,下面是我解决问题的方法。我用canvas元素创建了一个新的canvas组件,并将我的chart指令导入到新组件中。之后,每当我创建主组件的实例时,我都使用DynamicComponentLoader类动态加载我的组件
新home.component.ts:
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HomeComponent} from './home.component';
import {ProfileComponent} from './profile.component';
import {HoursComponent} from './hours.component';
import {SettingsComponent} from './settings.component';
import {TaskComponent} from './task.component';
import {ChartDirective} from './chart.directive';
@Component({
selector: 'track-me',
templateUrl: 'app/app.component.html',
directives: [ROUTER_DIRECTIVES,ChartDirective]
})
@RouteConfig([
{ path: '/', component: HomeComponent, name: 'Home' },
{ path: '/home', component: HomeComponent, name: 'Home' },
{ path: '/profile', component: ProfileComponent, name: 'Profile' },
{ path: '/hours', component: HoursComponent, name: 'Hours' },
{ path: '/settings', component: SettingsComponent, name: 'Settings' },
{ path: '/task', component: TaskComponent, name: 'Task' },
])
export class AppComponent { }
import {Component} from 'angular2/core';
import {ChartDirective} from './chart.directive';
import {TopicsComponent} from './topics.component';
@Component({
selector: 'home',
templateUrl: 'app/home.component.html',
directives: [TopicsComponent, ChartDirective]
})
export class HomeComponent { }
import {Component, DynamicComponentLoader, Injector} from 'angular2/core';
import {TopicsComponent} from './topics.component';
import {CanvasComponent} from './canvas.component';
@Component({
selector: 'home',
templateUrl: 'app/home.component.html',
directives: [TopicsComponent, CanvasComponent]
})
export class HomeComponent {
constructor(dcl: DynamicComponentLoader, injector: Injector) {
dcl.loadAsRoot(CanvasComponent, '#chartInsert', injector);
}
}
New home.component.html
<div class="container details-container">
<topics></topics>
</div>
<div class="graph-container">
<div class="row no-pad" style="position: relative;">
<div style="margin-left:14px; z-index: 100; height: 250px;" id="chartInsert">
</div>
<div class="vaxis-bar"></div>
</div><!--/row-->
<div class="row">
<div class="col-sm-12 text-center bottom-row">
HOURS(9)
</div>
</div>
</div>
小时(9)
新canvas.component.ts
import {Component} from 'angular2/core';
import {ChartDirective} from './chart.directive';
@Component({
selector: 'canvas-component',
template: '<canvas id="myChart" chart height="250" width="350"></canvas>',
directives: [ChartDirective]
})
export class CanvasComponent { }
从'angular2/core'导入{Component};
从“./chart.directive”导入{ChartDirective};
@组成部分({
选择器:“画布组件”,
模板:“”,
指令:[图表指令]
})
导出类CanvasComponent{}
我希望这能帮助一些人。关于ElementRef,Angular 2.0.0-beta.3出现了突破性的变化。不要在构造函数中使用ElementRef,你应该把ngOnInit看作是一个生命周期挂钩我在Angular2 RC 4上,这对我很有用。谢谢我没有在构造函数中进行任何初始化,而是将其转移到ngOnInit函数中。