将 amCharts 与 Dart 一起使用，无法从回调显示图表

Question

我试图用从dart应用程序调用的js-lib-amCharts显示一个简单的序列图。

在下面的代码中，main（）中对display（）的第一个调用确实按预期显示了图表。

但是，当我对第一个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"]);
  }]);
}

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的回答，我找到了如何做到这一点。有趣的是，我不需要调用"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"]);
}