在Angular2 chart.js之不显示，如果在主页上不存在 [英] Chart.js not showing in Angular2 if it doesn't exist on the main page
本文介绍了在Angular2 chart.js之不显示，如果在主页上不存在的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这似乎很动听，每当我倾倒图表主app.component.html，但只要我使用的一个子组件，并有路由到它的应用程序，该图表显示不出来。在巡视窗口中，它显示的元素具有0的高度和宽度0。有没有人有一个解决的办法？
下面是我的code我app.component.ts：
进口{}组件从angular2 /核心;
进口{RouteConfig，ROUTER_DIRECTIVES}从'angular2 /路由器;从./home.component进口{HomeComponent};
进口{} ProfileComponent从'./profile.component';
进口{} HoursComponent从'./hours.component';
从./settings.component进口{SettingsComponent};
进口{} TaskComponent从'./task.component';
进口{} ChartDirective从'./chart.directive';
@零件（{
选择：跟踪我
templateUrl：应用程序/ app.component.html'，
指令：[ROUTER_DIRECTIVES，ChartDirective]
}）@RouteConfig（[
{路径：'/'，分量：HomeComponent，名称：'家'}，
{路径：'/家'，组成：HomeComponent，名称：'家'}，
{路径：'/个人资料，分量：ProfileComponent，名称：资料}，
{路径：'/小时，部分：HoursComponent，名称：营业时间}，
{路径：/设置部分：SettingsComponent，名称：设置}，
{路径：'/任务，分量：TaskComponent，名称：'任务'}，
]）出口类AppComponent {}
下面是我的code我app.component.html：
＆LT; UL类=导航navmenu-NAV＆GT;
＆LT;立GT;＆LT; A [routerLink] =['/家庭']＆GT;家庭和LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A [routerLink] =['/个人资料']＆GT;简介＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A [routerLink] =['/小时']＆GT;设置时间＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A [routerLink] =[/设置]＆gt;设置＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A [routerLink] =['/任务']＆GT;完成任务＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;＆LT;路由器出口＆GT;＆LT; /路由器出口＆GT;
＆LT;帆布ID =myChart图HEIGHT =250WIDTH =350＆GT;＆LT; /帆布＆GT;
在HTML页面中的canvas元素将显示细腻。但是，一旦我把它放在我的home.component里面，它不会显示出来。
下面是我的home.component.ts：
进口{}组件从angular2 /核心;
进口{} ChartDirective从'./chart.directive';
进口{} TopicsComponent从'./topics.component';@零件（{
选择：'家'，
templateUrl：应用程序/ home.component.html'，
指令：[TopicsComponent，ChartDirective]
}）出口类HomeComponent {}
下面是我的home.component.html：
＆LT; DIV CLASS =集装箱细节容器＆GT;
＆LT;主题＆GT;＆LT; /主题＆GT;
＆LT; / DIV＆GT;＆LT; DIV CLASS =图容器＆GT;
＆LT; DIV CLASS =行无垫的风格=的位置是：相对的;＆GT;
＆LT; DIV的风格=保证金左：14px的; z-index的：100;高度：250像素;＆GT;
＆LT;帆布ID =myChart图HEIGHT =250WIDTH =350＆GT;＆LT; /帆布＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =vaxis吧＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT;！ - /行 - ＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-SM-12文本的底部中心行＆GT;
小时（9）
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
最后，这里是我的chart.directive.ts：
///＆lt;参考路径=../ node_modules / chart.js之/ chart.d.ts/＆GT;进口{指令，ElementRef，渲染器，输入}从'angular2 /核心;
@指示（{
选择：[图]
}）
出口类ChartDirective {
构造函数（EL：ElementRef，渲染：渲染器）{
//el.nativeElement.style.backgroundColor ='黄色';
VAR数据= {
标签： [， ， ， ， ， ， ， ， ]，
数据集：
{
标签：我跟踪，
填充颜色：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），
数据：[1，3，13，7,0，5,9，2,5]
}
]
};
VAR选择采用= {
pointDot：假的，scaleFontColor：＃50728d，scaleShowLabels：真正的，反应灵敏：假的，scaleLineColor：RGBA（255,255,255 .3）
}; 变种CTX：任何= el.nativeElement.getContext（2D）;
VAR折线图=新图（CTX）;
//// VAR lineChartOptions = areaChartOptions;
////lineChartOptions.datasetFill = FALSE;
lineChart.Line（数据，选择采用）; }}
解决方案
好了，这里就是我如何解决我遇到的问题。我创建了一个新的画布组件只用canvas元素和进口我的图表指令到新的组件。在那之后，我用DynamicComponentLoader类每当我创造我的家组件的一个实例动态加载我的组件。
新home.component.ts：
进口{组件，DynamicComponentLoader，喷油器}从'angular2 /核心;
进口{} TopicsComponent从'./topics.component';
进口{} CanvasComponent从'./canvas.component';@零件（{
选择：'家'，
templateUrl：应用程序/ home.component.html'，
指令：[TopicsComponent，CanvasComponent]
}）出口类HomeComponent {
构造器（DCL：DynamicComponentLoader，喷油：喷油器）{
dcl.loadAsRoot（CanvasComponent，'#chartInsert'，喷油器）;
}
}
新home.component.html
＆LT; DIV CLASS =集装箱细节容器＆GT;
＆LT;主题＆GT;＆LT; /主题＆GT;
＆LT; / DIV＆GT;＆LT; DIV CLASS =图容器＆GT;
＆LT; DIV CLASS =行无垫的风格=的位置是：相对的;＆GT;
＆LT; DIV的风格=保证金左：14px的; z-index的：100;高度：250像素; ID =chartInsert＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =vaxis吧＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT;！ - /行 - ＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-SM-12文本的底部中心行＆GT;
小时（9）
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
新canvas.component.ts
进口{}组件从angular2 /核心;
进口{} ChartDirective从'./chart.directive';@零件（{
选择：帆布成分'，
模板：'＆LT;帆布ID =myChart图HEIGHT =250WIDTH =350＆GT;＆LT; /帆布＆GT;，
指令：[ChartDirective]
}）出口类CanvasComponent {}
我希望这可以帮助别人。
It seems fine whenever I dump the chart to the main app.component.html, but as soon as I use it in a child component and have the app routed to it, the chart doesn't show up. In the inspector window, it shows the element as having 0 height and 0 width. Does anyone have a solution to this?
Here is my code for my app.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 { }
Here is my code for my 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>
The canvas element on the html page will show fine. However, once I put it inside of my home.component, it wont show.
Here's my home.component.ts:
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 { }
Here's my 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;">
<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>
Finally, here's my 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);
}
}
解决方案
Ok, so here's how I solved the issue I was having. I created a new canvas component with just the canvas element and imported my chart directive to the new component. After that, I used the DynamicComponentLoader class to dynamically load my component whenever I create an instance of my home component.
New home.component.ts:
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>
New 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 { }
I hope this can help someone out.
这篇关于在Angular2 chart.js之不显示，如果在主页上不存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
