如何在Dart中使用javascript库amCharts？

Question

我想从Dart中的amCharts库中绘制图形.

我根据此处描述的指南https://www.dartlang.org/articles/js-dart-interop/转换了Dart中amCharts网站的代码示例,但我无法绘制图表.

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

当我运行飞镖应用程序时,一切运行正常,但图表没有出现.

anobydy是否已经尝试过使用带有Dart的amCharts？

Answer 1

这是简单饼图的Js代码的dart版本.

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.
• 使用新的JsObject来创建新的js对象.
• 使用新的JsObject.jsify来转换类似JSON的结构.