我尝试用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"]);
}]);
}
最佳答案
尽管我找不到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"]);
}
关于charts - 在Dart中使用amCharts,无法通过回调显示图表,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20646131/