如何在Dart中使用JavaScript库amCharts？

Question

我想使用Dart中的amCharts库绘制图表。

我按照amCharts网站上的代码示例转换了Dart代码，遵循https://www.dartlang.org/articles/js-dart-interop/中描述的指南，但无法绘制图表。

我在Mac OS上使用Dart编辑器。

当我运行Dart应用程序时，一切都正常运行，但图表没有出现。

是否已经有人尝试过在Dart中使用amCharts？

- ecastanie

---

你能把你尝试过的代码粘贴一下吗？ - Alexandre Ardhuin

你在我看得见这个之前就回答了我的问题。 - ecastanie

Answer 1

以下是一个 Dart 版本的 Js 代码，用于生成 简单饼图。

import 'dart:js';

main(){
  final chartData = /* same datas as JS */;
  context['AmCharts'].callMethod('ready', [(){
    final chart = new JsObject(context['AmCharts']['AmPieChart']);
    chart['dataProvider'] = new JsObject.jsify(chartData);
    chart['titleField'] = "country";
    chart['valueField'] = "litres";
    chart['outlineColor'] = "#FFFFFF";
    chart['outlineAlpha'] = 0.8;
    chart['outlineThickness'] = 2;
    chart['balloonText'] = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";

    // WRITE
    chart.callMethod('write', ["chartdiv"]);
  }]);
}

基本上:

• 在JS中使用属性时，请使用数组表示法。
• 当在JS中调用方法时，请使用callMethod。
• 使用new JsObject创建新的JS对象。
• 使用new JsObject.jsify将类似JSON的结构转换为JS对象。

- Alexandre Ardhuin

---

你会用哪个HTML文件来配合这段Dart代码？我知道应该有一个<div id="chartdiv"></div>，但是<script>呢？ - ecastanie

类似这样的代码：<script src="http://www.amcharts.com/lib/3/amcharts.js"></script><script src="http://www.amcharts.com/lib/3/pie.js"></script> <script type="application/dart" src="myEntryPoint.dart"></script> <script src="packages/browser/dart.js"></script> - Alexandre Ardhuin

不要忘记设置 div 元素的大小 :) - MoAdiB

你们俩都帮了我：我不知道如何调用“ready”方法，而且我还忘记了div元素的样式/高度部分。 - ecastanie