Javascript 返回StoreSeries之前的Dojo图表图例绘图

我一直在尝试为具有多个StoreSeries的Dojo图表添加图例。 图例是在存储系列返回并分配符号之前绘制的

我使用JsonRest作为存储，连接到ASP.NET WebApi2站点以访问SQL Server中的数据。图表绘制得很好，只有图例绘制不正确

我已经在刷新功能中跟踪到了图例模块。序列数组已填充，但在绘制图例时，没有一个序列被指定符号：

var s = this.series || this.chart.series;
// AT THIS POINT s CONTAINS ALL MY SERIES
if( s.length == 0 ) {
    return;
}
if ( s[0].chart.stack[0].declaredClass == "dojox.charting.plot2d.Pie" ) {
    //Pie chart stuff
}
else {
    arr.forEach( s, function( x ) {
        // AT THIS POINT x.dyn IS STILL EMPTY = legend with labels but no symbol
        this._addLabel( x.dyn, x.legend || x.name );
    }, this );
}

我能做些什么让传奇等待所有商店系列的回归吗

我尝试在图表的各种属性上使用all/when，但它们似乎都会立即返回

编辑： 下面是用于制作图表的代码，我非常确定我只需要找到一种方法，在添加图例之前检查图表是否已完成渲染，但我还没有找到正确的检查方法：

init: function() {
// Create the chart content
this._chart = new Chart( this.chartNode );

// Add plots
this._chart.addPlot( 'default', {
    type: Lines,
    hAxis: 'x',
    vAxis: 'y'
} );

this._chart.addPlot( 'secondary', {
    type: StackedAreas,
    hAxis: 'x',
    vAxis: 'y'
} );

// Add axis
var xAxis = {
    minorTicks: false,
    titleGap: 8,
    titleFont: "normal normal normal 12px sans-serif",
    titleOrientation: 'away'
};

var yAxis = {
    vertical: true,
    includeZero: true,
    titleGap: 8,
    titleFont: "normal normal normal 12px sans-serif",
    titleOrientation: 'axis'
};

this._chart.addAxis( 'x', xAxis );
this._chart.addAxis( 'y', yAxis );

var lineStore = new ObservableStore( JsonRest( { target: this.lineUri } ) );

// Add series
var opts = {};

var plot = { plot: 'default' };
this._chart.addSeries( "Target", new StoreSeries( lineStore, opts, 'total'), plot );
this._chart.addSeries( "Threshold", new StoreSeries( lineStore, opts, 'target'), plot );
this._chart.addSeries( "YTD", new StoreSeries( lineStore, opts, 'ytd'), plot );

plot = { plot: 'secondary' };
// areaList is [{ name: 'hello', id: 0 }]
array.forEach( this.areaList, lang.hitch( this, function( area ) {
    var store = new StoreSeries( new ObservableStore( JsonRest( { target: this.areaUri + '/' + String( area.id ) } ) ), {}, 'total');
    this._chart.addSeries( area.name, store, plot );
}));

// Add Grid
this._chart.addPlot( 'grid', { type: Grid,
    hAxis: 'x',
    vAxis: 'y',
    hMajorLines: true,
    hMinorLines: false,
    vMajorLines: true,
    vMinorLines: false,
    majorHLine: { color: '#ACACAC', width: 0.5 },
    majorVLine: { color: '#ACACAC', width: 0.5 }
} );

// Apply theme
this._chart.setTheme( MyChartTheme );

// Draw!
this._chart.render();

// Legend
new Legend( { chart: this._chart, horizontal: false, title: 'Legend' }, this.legendNode );
},

---

我找到了在所有系列准备就绪之前创建的图例的解决方案

使用缓存存储和内存存储（而不是JsonRest存储）的延迟查询结果，我们可以等到所有序列都准备好后再创建图例

不要在StoreSeries中使用JsonRest，而是创建一个 JsonRest存储到内存存储

通过手动调用缓存存储上的query（）来填充缓存

等待查询完成（使用“when”），然后使用缓存内存存储 添加StoreSeries时

最后解决延迟问题，并继续创建图表（例如。 渲染并添加图例）

此方法只需要一次对rest服务的调用，因此比将store系列直接连接到rest商店（每个系列查询一次）要快得多。在图表出现在页面上之前仍有延迟，并且可能存在使用内存存储和大型数据集的问题。我使用这种方法记录了约15000条记录，没有任何问题

更正代码：

init: function() {
// Create the chart content
this._chart = new Chart( this.chartNode );

// Add plots
this._chart.addPlot( 'default', {
    type: Lines,
    hAxis: 'x',
    vAxis: 'y'
} );

this._chart.addPlot( 'secondary', {
    type: StackedAreas,
    hAxis: 'x',
    vAxis: 'y'
} );

// Add axis
var xAxis = {
    minorTicks: false
};

var yAxis = {
    vertical: true,
    includeZero: true
};

this._chart.addAxis( 'x', xAxis );
this._chart.addAxis( 'y', yAxis );

// Add the series as a deferred!
when( this.addSeries(), lang.hitch( this, function() {
    // Apply theme
    this._chart.setTheme( MyChartTheme );

    // Draw!
    this._chart.render();

    // Legend
    new Legend( { chart: this._chart, horizontal: false, title: 'Legend' }, this.legendNode );
}));
},

addSeries: function() {
var def = new Deferred();
var lineStore = new JsonRest( { target: this.lineUri } );
var memStore = new Memory();
var cacheStore = new Cache( lineStore, memStore );

// Manually populate the cached memory store (so each series doesn't do it!)
when( cacheStore.query(), lang.hitch( this, function(){
    // Add series
    var opts = {};

    var plot = { plot: 'default' };
    this._chart.addSeries( "Target", new StoreSeries( memStore, opts, 'total'), plot );
    this._chart.addSeries( "Threshold", new StoreSeries( memStore, opts, 'target'), plot );
    this._chart.addSeries( "YTD", new StoreSeries( memStore, opts, 'ytd'), plot );

    plot = { plot: 'secondary' };
    // areaList is [{ name: 'hello', id: 0 }]
    array.forEach( this.areaList, lang.hitch( this, function( area ) {
        var store = new StoreSeries( new ObservableStore( memStore, {}, 'total');
        this._chart.addSeries( area.name, store, plot );
    }));

    def.resolve(true);
}));

return def.promise;
},

---

如果您共享显示如何创建图表的代码，这将非常有用。加载数据后是否尝试刷新控件？添加了图表代码。我正试图找到一种方法来判断何时所有数据都已加载。