2013-12-10 3 views
3

Я хочу нарисовать графики из библиотеки amCharts в Дарт.Как использовать javascript-библиотеку amCharts с Dart?

Я преобразовал пример кода из веб-сайта amCharts в Dart, следуя инструкциям, описанным здесь https://www.dartlang.org/articles/js-dart-interop/, но я не могу получить диаграмму, которую нужно нарисовать.

Я использую редактор Dart на mac os.

Все работает нормально, когда я запускаю приложение для дартс, но диаграмма не отображается.

Есть ли anobydy уже пытались использовать amCharts с Dart?

+0

Не могли бы вы вставить код, который вы пробовали? –

+0

Вы ответили на мой вопрос, прежде чем я смог это прочитать. – ecastanie

ответ

5

Настоящая цифровая версия 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-подобную структуру.
+0

Какой файл html вы бы использовали с этим куском дротика? Я получаю, что должен быть

, но как насчет тип <сценарий =" приложение/дротик»SRC = "myEntryPoint.dart"> <сценарий SRC = "пакеты/браузер/dart.js">' –

+2

не забудьте установить размер элемент div :) – MoAdiB

Смежные вопросы