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

【问题标题】：Using amCharts with Dart, can't get to display a chart from a callback将 amCharts 与 Dart 一起使用，无法从回调中显示图表
【发布时间】：2013-12-17 22:36:11
【问题描述】：

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

【问题讨论】：

标签： charts dart dart-js-interop

【解决方案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"]);
}

【讨论】：

当我按照您的建议进行操作时，图表会在不单击按钮的情况下显示，并且在单击按钮时不会显示。但多亏了这个想法，我找到了如何让它发挥作用！
很高兴您发现了问题。

【解决方案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"]);
}

【讨论】：