图表不工作在Angular2 [英] Chart is not working in Angular2

问题描述

我正在尝试使用此 github repo 创建条形图。但我的chrome不显示图表。
这是我的 plnkr 。我不知道我做错了什么。

I am trying to create Bar Chart using this github repo. But my chrome does not display chart. Here is my plnkr. I don't know what i am doing wrong.

这是我更新的代码：

app.ts

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);
  }
}

app.html

<base-chart class="chart"
           [data]="barChartData"
           [labels]="barChartLabels"
           [options]="barChartOptions"
           [series]="barChartSeries"
           [legend]="barChartLegend"
           [chartType]="barChartType"
           (chartHover)="chartHovered($event)"
           (chartClick)="chartClicked($event)"></base-chart>

如果有任何另一个库在angular2的条形图上显示数据， >

Suggest me if there is any another library for displaying data on the bar chart for angular2.

推荐答案

我认为这个问题可以帮助你：

I think that this question could help you:

• 如果主页上不存在，Chart.js不会显示在Angular2中

• Chart.js not showing in Angular2 if it doesn't exist on the main page

这篇关于图表不工作在Angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！