Использование amCharts с Dart не может отобразить диаграмму с обратного вызова

Question

Я пытаюсь отобразить простую последовательную диаграмму с js lib amCharts, вызванным из приложения для дартс.

В следующем коде первый вызов display() в main() отображает график, как ожидалось.

Но когда я комментирую первый экран() и нажимаю на кнопку, чтобы вызвать отображение() из обратного вызова, диаграмма не отображается.

import 'dart:js'; 
import 'dart:html'; 

main(){ 
    ButtonElement button = new Element.tag("button"); 
    button.type = "submit"; 
    querySelector("#button").append(button); 
    button.onClick.listen((event) => someCallback()); 

    display(); // this call does display the chart 
} 

someCallback() { 
    display(); // this call does not display the chart 
} 

display() { 
    var chartData = [ 
        { 
        "date": "2012-03-01", 
        "price": 20 
        }, 
        { 
        "date": "2012-03-02", 
        "price": 75 
        }, 
        { 
        "date": "2012-03-03", 
        "price": 10 
        } 
        ]; 

    context['AmCharts'].callMethod('ready', [(){ 

    var chart2 = new JsObject(context['AmCharts']['AmSerialChart']); 

    chart2['dataProvider'] = new JsObject.jsify(chartData); 
    chart2['categoryField'] = "date"; 
    chart2['dataDateFormat'] = "YYYY-MM-DD"; 

    var categoryAxis = chart2['categoryAxis']; 
    categoryAxis['parseDates'] = true; 
    categoryAxis['minPeriod'] = "DD"; 
    categoryAxis['dashLength'] = 1; 

    var valueAxis = new JsObject(context['AmCharts']['ValueAxis']); 
    valueAxis['axisColor'] = "#DADADA"; 
    valueAxis['dashLength'] = 1; 
    chart2.callMethod('addValueAxis', [valueAxis]); 

    var graph = new JsObject(context['AmCharts']['AmGraph']); 
    graph['title'] = "Price"; 
    graph['valueField'] = "price"; 
    chart2.callMethod('addGraph', [graph]); 

    chart2.callMethod('write', ["chart"]); 
    }]); 
} 

Answer 1

Хотя я не могу найти документацию AmCharts.ready Я подозреваю, что это можно назвать только один раз amChart готов. Так что, возможно, когда-то уже готово ничего не делается, когда вы его вызываете.

Вы можете попытаться переместить context['AmCharts'].callMethod('ready', [... из display в main:

import 'dart:js'; 
import 'dart:html'; 

main(){ 
    ButtonElement button = new Element.tag("button"); 
    button.type = "submit"; 
    querySelector("#button").append(button); 
    button.onClick.listen((event) => someCallback()); 

    context['AmCharts'].callMethod('ready', [display]); 
} 

someCallback() { 
    display(); // this call does not display the chart 
} 

display() { 
    var chartData = [ 
        { 
        "date": "2012-03-01", 
        "price": 20 
        }, 
        { 
        "date": "2012-03-02", 
        "price": 75 
        }, 
        { 
        "date": "2012-03-03", 
        "price": 10 
        } 
        ]; 

    var chart2 = new JsObject(context['AmCharts']['AmSerialChart']); 

    chart2['dataProvider'] = new JsObject.jsify(chartData); 
    chart2['categoryField'] = "date"; 
    chart2['dataDateFormat'] = "YYYY-MM-DD"; 

    var categoryAxis = chart2['categoryAxis']; 
    categoryAxis['parseDates'] = true; 
    categoryAxis['minPeriod'] = "DD"; 
    categoryAxis['dashLength'] = 1; 

    var valueAxis = new JsObject(context['AmCharts']['ValueAxis']); 
    valueAxis['axisColor'] = "#DADADA"; 
    valueAxis['dashLength'] = 1; 
    chart2.callMethod('addValueAxis', [valueAxis]); 

    var graph = new JsObject(context['AmCharts']['AmGraph']); 
    graph['title'] = "Price"; 
    graph['valueField'] = "price"; 
    chart2.callMethod('addGraph', [graph]); 

    chart2.callMethod('write', ["chart"]); 
} 

Answer 2

Спасибо ответить @Alexandre Ardhuin, я нашел, как это сделать. Интересно, что мне не нужно называть «готовый» метод:

import 'dart:js'; 
import 'dart:html'; 

main(){ 
    ButtonElement button = new Element.tag("button"); 
    button.type = "submit"; 
    querySelector("#button").append(button); 
    button.onClick.listen((event) => someCallback()); 

} 

someCallback() { 
    display(); // this call _does_ display the chart 
} 

display() { 
    var chartData = [ 
        { 
        "date": "2012-03-01", 
        "price": 20 
        }, 
        { 
        "date": "2012-03-02", 
        "price": 75 
        }, 
        { 
        "date": "2012-03-03", 
        "price": 10 
        } 
        ]; 

    var chart2 = new JsObject(context['AmCharts']['AmSerialChart']); 

    chart2['dataProvider'] = new JsObject.jsify(chartData); 
    chart2['categoryField'] = "date"; 
    chart2['dataDateFormat'] = "YYYY-MM-DD"; 

    var categoryAxis = chart2['categoryAxis']; 
    categoryAxis['parseDates'] = true; 
    categoryAxis['minPeriod'] = "DD"; 
    categoryAxis['dashLength'] = 1; 

    var valueAxis = new JsObject(context['AmCharts']['ValueAxis']); 
    valueAxis['axisColor'] = "#DADADA"; 
    valueAxis['dashLength'] = 1; 
    chart2.callMethod('addValueAxis', [valueAxis]); 

    var graph = new JsObject(context['AmCharts']['AmGraph']); 
    graph['title'] = "Price"; 
    graph['valueField'] = "price"; 
    chart2.callMethod('addGraph', [graph]); 

    chart2.callMethod('write', ["chart"]); 
}