有没有人设法让 Chartjs 在 AngularDart 中工作？答案

【问题标题】：Has anyone managed to get the Chartjs to work in AngularDart?有没有人设法让 Chartjs 在 AngularDart 中工作？
【发布时间】：2017-02-12 04:55:59
【问题描述】：

更新：已解决。我在 index.html 文件中缺少 Chartjs 的脚本，糟糕：

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

按照示例，它只适用于 Dart，但它似乎不适用于 AngularDart。

我正在使用基于 Dart 示例进行修改的全新 Angular Web 应用程序。

我向 app_component.html 添加了相同的 DIV 元素，但有一个例外，这是一个本地变量，因此我可以通过 ViewChild 访问它>：

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

然后我将样式添加到 app_component.css（加上一个边框以查看画布）。我什至可以画一个矩形并看到它：

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

然后我将 Dart 示例中的相同图表代码添加到 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：

chartjs:

这又包含了 js 依赖。正如我所提到的，我可以进行绘图调用，比如绘制线条，所以我知道画布可以工作。

Dartium 的控制台显示错误：

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

有谁知道我是否遗漏了什么或者 JS 错误是什么意思？

【问题讨论】：

好像忘了添加chartjs原生js文件吧？
如何添加 chartjs 原生文件？ Chartjs 是 javascript，Chartjs.dart 使用 js interop 与之交互。
我更新了问题。我错过了 Chartjs 的脚本，Doh！
这就是我说的native（在JS世界里native就是纯js）
嗨@EndlessLife，你可以回答你自己的问题，然后接受它。只需将“更新：已解决”文本移动到下面的答案槽即可。这样一来，StackOverflow 的用户甚至在点击之前就知道这个问题已经得到解答（因此他们更有可能点击）。

标签： dart angular-dart

【解决方案1】：

我在 index.html 文件中缺少 Chartjs 的脚本包含，哎呀：

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

【讨论】：