如何使用Dart使用JavaScript庫amCharts？

Question

我想從Dart的amCharts庫中繪製圖形。

我在Dart中轉換了一個來自amCharts網站的代碼示例，遵循這裏所述的指導https://www.dartlang.org/articles/js-dart-interop/，但我無法繪製圖表。

我在mac os上使用Dart編輯器。

當我運行dart應用程序但沒有出現圖表時，一切正常運行。

anobydy是否已經嘗試將amCharts與Dart結合使用？

Answer 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中使用屬性

• 使用數組符號。
• 使用callMethod當你在Js中調用方法。
• 使用new JsObject創建新的js對象。
• 使用new JsObject.jsify來轉換類似JSON的結構。