javascript - 4 次查询后更新 Dojo 图表

Question

我在 Esri Javascript API 中构建了一张 map 。

该 map 内有一层，显示加油站。

随着 map 范围的变化，我针对该图层运行 4 个单独的查询，以找出当前范围内的加油站总数，即针对每个加油站 vendor 的查询。

例如(稍微简化)

//Shell 
shellQuery.where = "brand = 'Shell"
//Execute Query, and report result to console
shellQueryTask.executeForCount(shellQuery , function(count){
console.log(count);}

//BP
same again.  Repeats for 4 queries.

每个查询的结果都是dojo.deferred。

但是，由于它们是单独的查询(由于其他原因需要这样做)，因此它们返回结果的时间略有不同。

最终目标 - 包含一个 Dojo 条形图，该条形图通过这些查询进行更新，以显示当前范围内基于 vendor 的加油站的详细信息。

作为 Javascript 新手，更不用说 Dojo，我正在摸索更新 dojo 图表的最佳方法。我看到的大多数 Esri 示例都是围绕显示一个查询的结果，并且每次都通过创建一个新图表来实现。

我正在寻找一个最优雅的答案。

我目前认为我需要将 4 个查询的结果写入全局数据数组，然后调用一个单独的函数来更新 dojo 图表。只是有点担心确保在所有四个查询返回结果之前我不会调用该函数。

Answer 1

Dojo 的延期和 promise 对此非常有用!特别是dojo/promise/all模块(以前称为 DeferredList)。

既然你说你的 executeForCount 函数返回 Deferreds，你可以这样做:

shellQueryDeferred  = shellQueryTask.executeForCount(shellQuery);
texacoQueryDeferred = texacoQueryTask.executeForCount(texacoQuery);
....

// I assume you've required "dojo/promise/all" as "promiseAll" here:
promiseAll([shellQueryDeferred, texacoQueryDeferred, ...]).then(
    function(results) {
        // The "results" variable is an array with the results
        // from each query, after they've all completed.
    });

至于更新图表，我不完全确定最优雅的方式是什么。要记住的一件事是，可以使用相同的名称反复调用 chart.addSeries("name", [1,2,4])，并且该系列的数据将简单地被更新。之后您必须调用 chart.render() 。

例如:

promiseAll([shellQueryDeferred, texacoQueryDeferred, ...]).then(
    function(results) {
        var chartNumbers = getNumbersForChartFromQueryResults(results);
        chart.addSeries("Petrol stations", chartNumbers);
        chart.render();
    });

我在回答时总是会摆弄，所以也许它有一些帮助:http://fiddle.jshell.net/froden/SZmkJ/

编辑:Dojo 1.7 变体:

就像 Juffy 所说，在 1.7 中，你必须使用 dojo/DeferredList 。它几乎与搜索和替换一样简单，但有一些问题。首先，它必须像类一样实例化:

//promiseAll([shellQuery, texacoQuery, bobsPetrolAndBurgersQuery])
// I assume you've required "dojo/DeferredList" as "DeferredList" here:
new DeferredList([shellQuery, texacoQuery, bobsPetrolAndBurgersQuery])
    .then(function(data) { 
        ....

其次，回调函数中的data现在是一个数组数组，其中每个子数组中的第一项是成功/失败 bool 值。因此，在将数据传递到图表之前，您可能需要对数据进行一些处理。 (http://fiddle.jshell.net/froden/SZmkJ/1/)