使用带省道的amCharts，can'；无法从回调中显示图表

我尝试用从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"]);
  }]);
}

---

虽然我找不到amChart.ready的文档，但我怀疑只有在amChart准备好后才会调用它。所以，也许一旦它已经准备好了，当你调用它的时候，什么都没有做

您可以尝试将

context['AmCharts'].callMethod（'ready'，[…

从

display

移动到

main

：

导入'dart:js'；
导入“dart:html”；
main（）{
ButtoneElement button=新元素标记（“按钮”）；
button.type=“提交”；
查询选择器（“按钮”）。追加（按钮）；
listen（（事件）=>someCallback（））；
context['AmCharts'].callMethod（'ready'，[display]）；
}
someCallback（）{
display（）；//此调用不显示图表
}
显示（）{
var图表数据=[
{
“日期”：“2012-03-01”，
“价格”：20
},
{
“日期”：“2012-03-02”，
“价格”：75
},
{
“日期”：“2012-03-03”，
“价格”：10
}
];
var chart2=新的JsObject（上下文['AmCharts']['AmSerialChart']）；
chart2['dataProvider']=新的JsObject.jsify（chartData）；
图表2['categoryField']=“日期”；
图表2['dataDateFormat']=“YYYY-MM-DD”；
变量categoryAxis=chart2['categoryAxis']；
categoryAxis['parseDates']=true；
分类轴['minPeriod']=“DD”；
类别轴['dashLength']=1；
var valueAxis=newjsobject（上下文['AmCharts']['valueAxis']）；
valueAxis['axisColor']=“#DADADA”；
valueAxis['dashLength']=1；
图2.调用方法（'addValueAxis'，[valueAxis]）；
var-graph=newjsobject（上下文['AmCharts']['AmGraph']）；
图['title']=“价格”；
图['valueField']=“价格”；
图2.callMethod（'addGraph'，[graph]）；
chart2.callMethod（'write'，[“chart”]）；
}

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

---

当我按照你的建议去做的时候，图表不需要点击按钮就可以显示，点击按钮也不会显示。但是由于这个想法，我找到了如何让它工作的方法！很高兴你发现了这个问题。