Canvas 图表不显示在angular2组件中_Canvas_Angular_Chart.js

Canvas 图表不显示在angular2组件中

canvas angular chart.js

Canvas 图表不显示在angular2组件中,canvas,angular,chart.js,Canvas,Angular,Chart.js,我正在尝试使用chart.js在Angular2组件中构建图表。到目前为止，我还没有成功。图表显然是建立的，但没有显示。画布元素的宽度和高度为空（）如果我尝试对simpe html页面和js脚本执行同样的操作，那么一切都会正常工作这是我的密码。提前感谢您的帮助 index.html <html> <head> <base href="/"> <title>Angular 2 Sandbox - Chart compon

我正在尝试使用chart.js在Angular2组件中构建图表。到目前为止，我还没有成功。图表显然是建立的，但没有显示。画布元素的宽度和高度为空（

）

如果我尝试对simpe html页面和js脚本执行同样的操作，那么一切都会正常工作

这是我的密码。提前感谢您的帮助

index.html

<html>
  <head>
      <base href="/">
    <title>Angular 2 Sandbox - Chart component</title>
    <!-- 1. Load libraries -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
    <script src="./lib/chart.js/chart.min.js"></script>
  </body>
</html>


角度2沙盒-图表组件
System.config({
包：{
应用程序：{
格式：'寄存器'，
defaultExtension:'js'
}
}
});
System.import（'app/boot'）
.then（null，console.error.bind（console））；
加载。。。

应用程序组件.ts

import {Component} from 'angular2/core';
import {MyChart} from './myChart.component'
@Component({
  selector: 'my-app',
  template: `
    <h1>Here is the App</h1>
    <div style="width:30%">
        <my-chart></my-chart>
    </div>
  `,
    directives: [MyChart]
})
export class AppComponent{ 
}

import {Component, ViewChild} from 'angular2/core';

declare var Chart: any;

@Component({
  selector: 'my-chart',
  template: `
    <canvas #canvasElement></canvas>
  `,
})

export class MyChart { 
    @ViewChild('canvasElement') canvasElement;

    ngAfterViewInit() {
        let lineChartData = this.initializeData();
        var ctx = this.canvasElement.nativeElement.getContext("2d");
        console.log(ctx);
        var thisChart = new Chart(ctx)["Line"](lineChartData, {
            responsive: true
        });
        console.log(thisChart);
    }

    initializeData() {
        var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
        var lineChartData = {
            labels : ["January","February","March","April","May","June","July"],
            datasets : [
                {
                    label: "My First dataset",
                    fillColor : "rgba(220,220,220,0.2)",
                    strokeColor : "rgba(220,220,220,1)",
                    pointColor : "rgba(220,220,220,1)",
                    pointStrokeColor : "#fff",
                    pointHighlightFill : "#fff",
                    pointHighlightStroke : "rgba(220,220,220,1)",
                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                },
                {
                    label: "My Second dataset",
                    fillColor : "rgba(151,187,205,0.2)",
                    strokeColor : "rgba(151,187,205,1)",
                    pointColor : "rgba(151,187,205,1)",
                    pointStrokeColor : "#fff",
                    pointHighlightFill : "#fff",
                    pointHighlightStroke : "rgba(151,187,205,1)",
                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                }
            ]

        } 
        return lineChartData;
    }

}

从'angular2/core'导入{Component}；
从“./MyChart.component”导入{MyChart}
@组成部分({
选择器：“我的应用程序”，
模板：`
这是应用程序
`,
指令：[我的图表]
})
导出类AppComponent{
}

myChart.component.ts

import {Component} from 'angular2/core';
import {MyChart} from './myChart.component'
@Component({
  selector: 'my-app',
  template: `
    <h1>Here is the App</h1>
    <div style="width:30%">
        <my-chart></my-chart>
    </div>
  `,
    directives: [MyChart]
})
export class AppComponent{ 
}

import {Component, ViewChild} from 'angular2/core';

declare var Chart: any;

@Component({
  selector: 'my-chart',
  template: `
    <canvas #canvasElement></canvas>
  `,
})

export class MyChart { 
    @ViewChild('canvasElement') canvasElement;

    ngAfterViewInit() {
        let lineChartData = this.initializeData();
        var ctx = this.canvasElement.nativeElement.getContext("2d");
        console.log(ctx);
        var thisChart = new Chart(ctx)["Line"](lineChartData, {
            responsive: true
        });
        console.log(thisChart);
    }

    initializeData() {
        var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
        var lineChartData = {
            labels : ["January","February","March","April","May","June","July"],
            datasets : [
                {
                    label: "My First dataset",
                    fillColor : "rgba(220,220,220,0.2)",
                    strokeColor : "rgba(220,220,220,1)",
                    pointColor : "rgba(220,220,220,1)",
                    pointStrokeColor : "#fff",
                    pointHighlightFill : "#fff",
                    pointHighlightStroke : "rgba(220,220,220,1)",
                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                },
                {
                    label: "My Second dataset",
                    fillColor : "rgba(151,187,205,0.2)",
                    strokeColor : "rgba(151,187,205,1)",
                    pointColor : "rgba(151,187,205,1)",
                    pointStrokeColor : "#fff",
                    pointHighlightFill : "#fff",
                    pointHighlightStroke : "rgba(151,187,205,1)",
                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                }
            ]

        } 
        return lineChartData;
    }

}

从'angular2/core'导入{Component，ViewChild}；
申报var图表：有；
@组成部分({
选择器：“我的图表”，
模板：`
`,
})
导出类MyChart{
@ViewChild（'canvasElement'）canvasElement；
ngAfterViewInit（）{
让lineChartData=this.initializeData（）；
var ctx=this.canvasElement.nativeElement.getContext（“2d”）；
控制台日志（ctx）；
var thisChart=新图表（ctx）[“线条”]（线条图表数据{
回答：对
});
console.log（此图表）；
}
初始化数据（）{
var randomScalingFactor=function（）{return Math.round（Math.random（）*100）}；
变量lineChartData={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：[随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（）]
},
{
标签：“我的第二个数据集”，
填充颜色：“rgba（151187205,0.2）”，
strokeColor:“rgba（151187205,1）”，
点颜色：“rgba（151187205,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（151187205,1）”，
数据：[随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（）]
}
]
} 
返回线形图数据；
}
}

设置Plunker，请神奇地解决从CDN获取图表的问题。设置我导入的Plunker chart.js。Plunker让我指出“cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.js”。在我最初的尝试中，我指向chart.min.js的本地版本（刚从GitHub导入）。现在它神奇地工作了，但我不知道为什么我要尝试使用我的本地chart.min.js（它在angular2组件之外工作得非常好），图表没有显示。无论如何，如果您使用SystemJs（例如），最好的方法是通过路径数组定义依赖项：

path:{'rxjs/operators/*'：'assets/js/vendor/rxjs/operator/*.js'，'semantic/*'：'assets/js/vendor/semantic/*.js'，'socket.io客户端'：'assets/js/vendor/socket.io-1.3.7.js'，

而不是使用``导入*作为来自'lib\u in\u路径'的内容'``可以在代码中加载它（按需）。非常感谢，Priming的Ciao EnricoChart组件可以提供帮助。设置Plunker，请神奇地解决从CDN获取图表的问题。设置我导入的Plunker CHART.js。Plunker让我指向“cdnjs.cloudflare.com/ajax/libs/CHART.js/0.2.0/CHART.js”。在我最初的尝试中，我指向的是CHART.min.js的本地版本（刚从GitHub导入）。现在它神奇地工作了，但我不知道为什么我要尝试使用我的local chart.min.js（它在angular2组件之外工作得非常好）。图表没有显示。无论如何，如果您使用SystemJs（例如），好的方法是通过路径数组定义依赖关系：

path:{'rxjs/operators/*'：'assets/js/vendor/rxjs/operator/*.js'，'semantic/*'：'assets/js/vendor/semantic/*.js'，'socket.io客户端'：'assets/js/vendor/socket.io-1.3.7.js'，

而不是使用``导入*作为来自'lib\u in\u路径'的内容'``可以在代码中加载它（按需）。非常感谢，Priming的Ciao EnricoChart组件可以提供帮助。