Chart.js v2图表未显示在角度2内(但Chart.js v1完美运行) [英] Chart.js v2 charts do not display inside angular 2 (but Chart.js v1 works perfectly)

问题描述

我正在把一个图表绘制在angular2属性指令内(angular2团队采用的一种方法).此方法适用于chart.js，但不适用于 chart.js 2.x

I am rendering a chart inside an angular2 attribute directive (an approach taken by the angular2 team). This approach works with chart.js but not chart.js 2.x

属性指令的代码是...

code for attribute directive is ...

import {Directive, ElementRef, Input} from '@angular/core';

declare var Chart:any;

@Directive({
  selector: '[bargraph]'
})

export class BarGraphDirective {

  el:any;
  myChart:any;

  constructor(element:ElementRef) {
    this.el = element.nativeElement;
  }

  ngAfterViewInit() {
    var canvas = this.el;
    var ctx = canvas.getContext('2d');

    var _data = {
      labels: ["01-01",
        "01-04",
        "01-15",
        "02-03",
        "03-25",
        "04-03",
        "04-14",
        "05-27",
        "05-27",
        "08-03"],
      datasets: [{
        data: [5, 13, 23, 20, 5, 13, 23, 20, 110, 2],
        label: "female",
        borderColor: "rgba(197,23,1,0.8)",
        backgroundColor: "rgba(197,23,1,0.4)",
        hoverBackgroundColor: "rgba(197,23,1,1)",
        borderWidth: 1,
        pointBorderColor: "rgba(197,23,1,1)",
        pointBackgroundColor: "rgba(255,255,255,0.8)",
        pointBorderWidth: 1.5,
        tension: -1,
        yAxisID: "y-axis-1",
      }, ],
    };

    var _options = {
      scales: {
        xAxes: [{
          categorySpacing: 0
        }],
        yAxes: [{
          type: "linear",
          display: true,
          position: "left",
          id: "y-axis-1",
        }]
      }
    };

    this.myChart = new Chart(ctx, {
      type: "line",
      data: _data,
      options: _options
    });

    console.log(ctx);
    console.log(this.myChart);
  }
}

样式是...

canvas[bargraph] {
  height: 400px !important;
  width: 700px !important;
}

使用该组件的组件具有...

the component using this has ...

<canvas bargraph width="700" height="400"></canvas>

在模板中.

一切都如预期. console.log语句显示ctx和this.myChart都在ngAfterViewInit生命周期挂钩中定义. 没有错误. 该图形根本不会显示.

everything is as expected. The console.log statements reveal ctx and this.myChart are both defined inside the ngAfterViewInit lifecycle hook. There are no errors. The graph simply does not display.

PS根据此JS小提琴，Chart.js v2代码在Angular2之外均可正常工作- http://jsfiddle.net/beehe4eg/

PS The Chart.js v2 code works fine outside Angular2 as per this JS Fiddle - http://jsfiddle.net/beehe4eg/

JSFiddle和我的代码之间的唯一区别是钩入DOM ...

The only difference between the JSFiddle and my code is the hook into the DOM ...

document.getElementById("barChart") // for the fiddle

element.nativeElement // in my code as per the approach in the angular 2 docs

有关属性指令的文档，尤其是有关DOM hook的文档，... https://angular.io/docs/ts/latest/guide/attribute-directives.html#！#our-first-draft

docs for attribute directive and particularly for DOM hook is ... https://angular.io/docs/ts/latest/guide/attribute-directives.html#!#our-first-draft

element.nativeElement钩子对于带有angular2的chart.js v1可以正常工作(使用相同的方法).

The element.nativeElement hook works fine for chart.js v1 with angular2 (using an identical approach).

请注意github回购... https://github.com/valor-software/ng2-charts 正在使用chart.js v1，因此无济于事

NOTE that github repo ... https://github.com/valor-software/ng2-charts is using chart.js v1 so this doesn't help

希望那里的某个人知道解决方案或可以解决该问题！预先感谢.

Hoping someone out there might know a solution or can fix it! Thanks in advance.

推荐答案

今天的当前版本是2.1.0. API已更改. 2.0-alpha版本于2015年6月5日发布. https://github.com/chartjs/Chart.js/releases/tag/v2.0-alpha 您在jsfiddle中使用的版本是2.0.0-alpha4(2015年6月22日，哈希9368c6079d989527dcd2072b6f18780b53e3113c)

Today current version is 2.1.0. API has changes. Version 2.0-alpha was released on 5 Jun 2015. https://github.com/chartjs/Chart.js/releases/tag/v2.0-alpha Version that you use in jsfiddle is 2.0.0-alpha4 (22 Jun 2015, hash 9368c6079d989527dcd2072b6f18780b53e3113c)

您需要按照以下说明更改代码:

You need to change your code as described below:

this.myChart = new Chart(ctx).Line({
  data: _data,
  options: _options
});

查看带有图表v2.0-alpha的工作示例 https://plnkr.co/edit/IFdEeMcS9lHGWrsUwkGb?p =预览

See working example with chart v2.0-alpha https://plnkr.co/edit/IFdEeMcS9lHGWrsUwkGb?p=preview

如果使用语法2.1.3，则可以这样编写:

If you use syntax 2.1.3 then you can write like this:

this.myChart = new Chart(ctx, {
  type: 'line',
  data: _data,
  options: _options
});

带有v2.1.3的示例 https://plnkr.co/edit/GubwdD9Voo3mBPYYKEEL?p=preview

Example with v2.1.3 https://plnkr.co/edit/GubwdD9Voo3mBPYYKEEL?p=preview

这篇关于Chart.js v2图表未显示在角度2内(但Chart.js v1完美运行)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！