Question

我正在尝试使用chart.js在Angular2组件中构建图表。到目前为止，我还没有成功。该图表显然已建成但未显示。 canvas元素的宽度和高度为null（class Event(models.Model): creator = models.ForeignKey(User, related_name="created_events") participants = models.ManyToManyField( User, related_name="joined_events", through='EventsParticipants') class EventsParticipants(models.Model): user = models.ForeignKey(User) event = models.ForeignKey(Event) date_invited = models.DateTimeField( auto_now_add=True, blank=False, null=False) class Meta: unique_together = (('user', 'event'),) class User(models.Model): name = models.CharField(....)）。

如果我尝试使用simpe html页面和js脚本做同样的事情，一切正常。

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

的index.html

<canvas width="0" height="0" style="width: 0px; height: 0px;"></canvas>

app.component.ts

<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>

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{ 
}

图表不会显示在angular2组件中

0 个答案: