charts - 在Dart中使用amCharts，无法通过回调显示图表

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