Sencha 图表中数据点的呈现

Question

我有一个 Sencha 图表，其中我根据数据存储中的值以特定颜色呈现一些数据点。只要我不缩放图表，这也能正常工作，但是当我缩放图表的 x 轴时，突出显示的数据点会移动，因为渲染器函数的索引不再对应于记录的索引商店。看到这个 fiddle：https://fiddle.sencha.com/#fiddle/ls3 -> 缩放 x 轴

原图：再次放大缩小后的图表（第二个红点应该没有）：

有没有办法避免这种行为？

提前致谢！

Answer 1

这是一些记录在案的行为，即使该文档显然是在嘲讽您：

It is usually the index of the store record associated with the sprite

传递给呈现器的参数中似乎没有信息可用于以绝对可靠的方式检索记录...但是，method that calls the renderer has the information, so a simple override can save the day (fixed fiddle):

// I like to name overrides after the overridden class, but do as per your tastes
Ext.define('MyApp.overrides.Ext.chart.series.sprite.Line.RendererIndex', {
    override: 'Ext.chart.series.sprite.Line',

    // The parent method will call the renderer, and knows the start index...
    // but it won't give it to you, so let's help ourselve and store it now.
    renderAggregates: function (aggregates, start, end, surface, ctx, clip, region) {
        this.renderingRangeStart = start;
        return this.callParent(arguments);
    },

    // Utility method to convert the index into some useful piece of information,
    // that is a store record. The name is a bit circumvoluted in order to avoid
    // collision with some future code from Sencha
    getRecordAtRenderIndex: function(index) {
        var store = this.getStore();
        if (store) {
            return store.getAt(this.renderingRangeStart + index);
        }
    }
});

在父方法中，这是调用渲染器的行：

markerCfg = attr.renderer.call(this, this, markerCfg, {store:this.getStore()}, i/3) || {};

人们可能会想将此行更改为 "fix" 传递给渲染器的参数，但是 (1) 这可能会破坏其他现有的渲染器，并且 (2) 这将需要复制粘贴整个方法的代码，这总是让人对未来有点担忧。我认为最好使用 "around" 代码；这在这里很容易成为可能，因为缺失的信息位于被覆盖方法的参数中。

Sencha 图表中数据点的呈现

Rendering of data points in Sencha charts

extjs

sencha-touch

sencha-touch-2

sencha-touch-2.1