在Dart中使用amCharts，無法從回調中顯示圖表

我嘗試使用從dart應用程序調用的js lib amCharts來顯示簡單的串行圖表。在Dart中使用amCharts，無法從回調中顯示圖表

在下面的代碼中，第一次調用main（）中的display（）會按預期顯示圖表。

但是，當我評論第一個顯示（）並單擊按鈕從回調調用display（）時，圖表不會出現。

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"]); 
    }]); 
}

來源

2013-12-17 ecastanie

雖然我不能找到AmCharts.ready的文檔，我懷疑它只能被調用一次amChart已準備就緒。所以也許一旦它已經準備好當你打電話時什麼都不做。

你可以嘗試從display移動context['AmCharts'].callMethod('ready', [...到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"]); 
}

來源

2013-12-18 07:42:44

當我按照你的建議做時，圖表不顯示按鈕而不點擊按鈕。但是，多虧了這個想法，我發現瞭如何使它工作！ – ecastanie

很高興你發現了這個問題。 –

感謝到@Alexandre Ardhuin的答案，我發現如何做到這一點。有趣的是，我不需要調用'ready'方法：

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"]); 
}

來源

2013-12-18 08:29:32 ecastanie

在Dart中使用amCharts，無法從回調中顯示圖表

回答

相關問題