javascript - 如何在 Dart 中使用 javascript 库 amCharts？

Question

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

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

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

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

anobydy 是否已经尝试将 amCharts 与 Dart 结合使用？

Answer 1

这是 the Js code 的 Dart 版本的 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 中使用属性时使用数组表示法。
• 使用callMethod在 Js 中调用方法时。
• 使用new JsObject创建新的 js 对象。
• 使用new JsObject.jsify转换类似 JSON 的结构。