ChartjsをAngularDartで動かすことができた人は誰ですか？

Question

更新：解決済み。私はおっと、index.htmlファイルにChartjsために含めるスクリプトがありませんでした：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 

それは、たとえば次のようちょうどダートで動作しますが、AngularDartで動作するようには思えません。

新鮮な角ウェブアプリケーションダーツ例に基づいて変更を使用しています。

Iは、app_component.html 1つの例外を除いて同じDIV元素を添加し、そしてIはViewChildを介してアクセスできるように、それはローカル変数である：

<div> 
    <p>Canvas</p> 
    <div class="wrapper"> 
     <canvas #theCanvas id="canvas" height="450" width="600"></canvas> 
    </div> 
</div> 

I次いでスタイルを追加app_component.css（加えて、キャンバスを見るための境界線）。私も矩形に描画し、それを見ることができます。

div.wrapper { 
margin: 0 auto; 
max-width: 800px; 
text-align: center; 
font-style: italic; 
border: #6bc5ff 1px solid; 
} 

私はその後、app_commponent.dartファイルにダートの例から同じチャートのコードを追加しました：私は、依存関係を追加

Angular imports... 
import 'package:chartjs/chartjs.dart'; 

@Component(
    selector: 'my-app', 
    styleUrls: const ['app_component.css'], 
    templateUrl: 'app_component.html', 
    directives: const [materialDirectives, HelloDialog], 
    providers: const [materialProviders], 
) 
class AppComponent implements AfterContentInit, AfterViewInit { 
    @ViewChild('theCanvas') 
    ElementRef canvas; 

    CanvasElement canvasEl; 

    math.Random rnd = new math.Random(); 
    List<String> months = <String>[ 
    "January", "February", "March", "April", "May", "June"]; 

    ngAfterContentInit() { 
    canvasEl = canvas.nativeElement; 
    } 

    ngAfterViewInit() { 
    var data = new LinearChartData(labels: months, datasets: <ChartDataSets>[ 
     new ChartDataSets(
      label: "My First dataset", 
      backgroundColor: "rgba(220,220,220,0.2)", 
      data: months.map((_) => rnd.nextInt(100)).toList()), 
     new ChartDataSets(
      label: "My Second dataset", 
      backgroundColor: "rgba(151,187,205,0.2)", 
      data: months.map((_) => rnd.nextInt(100)).toList()) 
    ]); 

    var config = new ChartConfiguration(
     type: 'line', data: data, options: new ChartOptions(responsive: true)); 

    Chart chart = new Chart(canvasEl, config); 
    } 
} 

pubspec.yaml：今度はJS依存性を含め

chartjs: 

。私が言及したように、描画線のような描画呼び出しを行うことができるので、キャンバスが動作することがわかります。

Dartiumのコンソールにはエラーを示しています。私は何かを逃したか、JSエラーが何を意味するのかあれば

Uncaught Unhandled exception: 
Not a valid JS object 
#0  JsNative.callConstructor (dart:js:1461) 
#1  Chart.Chart (package:chartjs/chartjs.dart_js_interop_patch.dart:31:30) 
#2  AppComponent.ngAfterViewInit (package:DeuronNG/app_component.dart:59:23) 
... 

誰でも知っていますか？

Answer 1

私はスクリプトがありませんでしたおっと、index.htmlファイルにChartjsために、次のとおりです

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>