1

ダーツ アプリから呼び出された 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"]);
  }]);
}
4

2 に答える 2

2

のドキュメントは見つかりませんが、amChartAmCharts.readyの準備が整ったときにのみ呼び出されると思われます。したがって、おそらく準備が整ったら、呼び出しても何も行われません。

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"]);
}
于 2013-12-18T07:42:44.717 に答える
0

@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-18T08:29:32.080 に答える