如何在 Dart 中使用 javascript 库 amCharts？答案

【问题标题】：How to use javascript library amCharts with Dart?如何在 Dart 中使用 javascript 库 amCharts？
【发布时间】：2013-12-28 12:38:28
【问题描述】：

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

我按照此处https://www.dartlang.org/articles/js-dart-interop/ 中描述的准则在 Dart 中转换了来自 amCharts 网站的代码示例，但我无法绘制图表。

我在 mac os 上使用 Dart 编辑器。

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

anobydy 是否已经尝试将 amCharts 与 Dart 一起使用？

【问题讨论】：

你能粘贴你试过的代码吗？
在我读完这篇文章之前你已经回答了我的问题。

标签： javascript charts dart

【解决方案1】：

这是the Js code 的飞镖版本Simple pie chart。

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结构。

【讨论】：

这个飞镖用什么 html 文件？我知道应该有一个
但是
类似<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>
别忘了设置 div 元素的大小 :)
你们俩都帮了我：我不知道如何调用“就绪”方法，我忘记了 div 元素的样式/高度部分。