Question

我一直试图将图例添加到包含多个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 );
},

Answer 1

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

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

不使用StoreSeries中的JsonRest，而是创建缓存 JsonRest到Memory商店。
通过手动调用缓存存储上的query（）来填充缓存。
等待查询完成（使用“when”），然后使用缓存的内存存储添加StoreSeries时。
最后解决延迟，并继续创建图表（例如渲染并添加图例。

此方法只需要对其余服务进行一次调用，因此比将商店系列直接连接到其余商店（每个系列查询一次）要快得多。图表出现在页面上之前仍有延迟，使用具有大型数据集的内存存储可能会出现问题。我使用这种方法有大约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;
},

在StoreSeries返回之前的Dojo图表图例绘制

1 个答案: