Charts 图表在Angular2中不起作用
我正在尝试用这个创建条形图。但我的chrome不显示图表。 这是我的名片。我不知道我做错了什么 这是我的更新代码： app.tsCharts 图表在Angular2中不起作用,charts,typescript,angular,bar-chart,Charts,Typescript,Angular,Bar Chart,我正在尝试用这个创建条形图。但我的chrome不显示图表。 这是我的名片。我不知道我做错了什么 这是我的更新代码： app.ts import {Component, Pipe, PipeTransform} from 'angular2/core'; import {CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common';
import {Component, Pipe, PipeTransform} from 'angular2/core';
import {CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common';
import {CHART_DIRECTIVES} from './ng2-charts.ts';
@Component({
selector: 'my-app',
templateUrl: 'mytemplate.html',
directives: [CHART_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class AppComponent {
constructor() {
console.log('bar demo');
}
private barChartOptions = {
scaleShowVerticalLines: false,
responsive: true,
multiTooltipTemplate: '<%if (datasetLabel){%><%=datasetLabel %>: <%}%><%= value %>'
};
private barChartLabels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
private barChartSeries = ['Series A', 'Series B'];
public barChartType = 'Bar';
private barChartLegend:boolean = true;
private barChartData = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
// events
chartClicked(e:any) {
console.log(e);
}
chartHovered(e:any) {
console.log(e);
}
}
import {Component, DynamicComponentLoader, Injector} from 'angular2/core';
import {CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common';
import {ChartDirective} from './charts.ts';
@Component({
selector: 'my-app',
templateUrl: 'mytemplate.html',
directives: [ChartDirective, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class AppComponent {
constructor() {
}
}
从'angular2/core'导入{Component，Pipe，PipeTransform}；
从“angular2/common”导入{CORE_指令、NgClass、FORM_指令、控件、ControlGroup、FormBuilder、Validators}；
从“/ng2 charts.ts”导入{CHART_DIRECTIVES}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:'mytemplate.html'，
指令：[图表指令、NgClass、核心指令、表格指令]
})
导出类AppComponent{
构造函数（）{
console.log（'bar demo'）；
}
专用条形图选项={
ScaleShowVerticalline:错误，
回答：是的，
多工具模板：'：'
};
私人条形图标签=['2006'、'2007'、'2008'、'2009'、'2010'、'2011'、'2012']；
私人条形图系列=['A系列'，'B系列']；
公共条形图类型='Bar'；
私有条形图图例：布尔值=真；
专用条形图数据=[
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
//事件
（e：任何）{
控制台日志（e）；
}
图表悬停（e:任何）{
控制台日志（e）；
}
}
<base-chart class="chart"
[data]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[series]="barChartSeries"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></base-chart>
<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>
</div>
建议我是否有其他库用于在angular2条形图上显示数据。我认为这个问题可以帮助您：
import {Component, Pipe, PipeTransform} from 'angular2/core';
import {CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common';
import {CHART_DIRECTIVES} from './ng2-charts.ts';
@Component({
selector: 'my-app',
templateUrl: 'mytemplate.html',
directives: [CHART_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class AppComponent {
constructor() {
console.log('bar demo');
}
private barChartOptions = {
scaleShowVerticalLines: false,
responsive: true,
multiTooltipTemplate: '<%if (datasetLabel){%><%=datasetLabel %>: <%}%><%= value %>'
};
private barChartLabels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
private barChartSeries = ['Series A', 'Series B'];
public barChartType = 'Bar';
private barChartLegend:boolean = true;
private barChartData = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
// events
chartClicked(e:any) {
console.log(e);
}
chartHovered(e:any) {
console.log(e);
}
}
import {Component, DynamicComponentLoader, Injector} from 'angular2/core';
import {CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common';
import {ChartDirective} from './charts.ts';
@Component({
selector: 'my-app',
templateUrl: 'mytemplate.html',
directives: [ChartDirective, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class AppComponent {
constructor() {
}
}
<base-chart class="chart"
[data]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[series]="barChartSeries"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></base-chart>
<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>
</div>
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: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
var options = {
scaleBeginAtZero : true,scaleShowGridLines : true,
scaleGridLineColor : "rgba(0,0,0,.05)",
scaleGridLineWidth : 1,
scaleShowHorizontalLines: true,
scaleShowVerticalLines: true,
barShowStroke : true,
barStrokeWidth : 2,
barValueSpacing : 5,
barDatasetSpacing : 1,
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
}
var ctx: any = el.nativeElement.getContext("2d");
var BarChart = new Chart(ctx);
BarChart.Bar(data, options);
}
}
import{Directive，ElementRef，Renderer，Input}来自'angular2/core'；
@指示({
选择器：“[图表]”
})
导出类图表指令{
构造函数（el:ElementRef，渲染器：渲染器）{
//el.nativeElement.style.backgroundColor='黄色'；
风险值数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.5）”，
strokeColor:“rgba（2200,0.8）”，
高光填充：“rgba（2200,0.75）”，
强光笔划：“rgba（2201）”，
数据：[65,59,80,81,56,55,40]
},
{
标签：“我的第二个数据集”，
填充颜色：“rgba（151187205,0.5）”，
strokeColor：“rgba（151187205,0.8）”，
高光填充：“rgba（151187205,0.75）”，
强光笔划：“rgba（151187205,1）”，
数据：[28,48,40,19,86,27,90]
}
]
};
变量选项={
scaleBeginAtZero:true，scaleShowGridLines:true，
scaleGridLineColor:“rgba（0,0,0,05）”，
scaleGridLineWidth:1，
缩放水平线：对，
scaleShowVerticalLines：没错，
barShowStroke：是的，
杆行程宽度：2，
barValueSpacing:5，
barDatasetSpacing:1，
legendTemplate:“
”
}
var ctx:any=el.nativeElement.getContext（“2d”）；
var条形图=新图表（ctx）；
条形图（数据、选项）；
}
}
工作plnkr您建议的github回购与问题的回购相同，不是吗？哦，您是对的。这是因为我只看到plunkr（）中包含的
Chart.js