在Sencha图表中渲染数据点

Question

我有一个Sencha图表，我根据数据存储中的值呈现特定颜色的一些数据点。这个工作正常，因为我没有缩放图表，但随着我缩放图表的x轴，突出显示的数据点移动，因为渲染器函数的索引不再对应于记录的索引商店。看到这个小提琴：https://fiddle.sencha.com/#fiddle/ls3 - ＆gt;缩放x轴

原始图表： 放大和缩小后的图表（第二个红点不应该在那里）：

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

提前致谢！

Answer 1

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

  

它通常是与精灵相关联的商店记录的索引

传递给渲染器的参数中似乎没有可用于以绝对可靠的方式检索记录的信息......但是，method that calls the renderer有信息，所以简单的覆盖可以保存一天（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) || {};

可能很想改变这一行以“修复”传递给渲染器的参数，但是（1）可能会破坏其他现有的渲染器，以及（2）需要复制粘贴方法的整个代码这对于未来总是有点担心。我认为最好在代码周围工作;因为缺少的信息位于被重写方法的参数中，所以这里很容易实现。