Extjs：用不同的颜色在一系列线条中给精灵着色

我使用Extjs图表，特别是线条系列来实现我的需求

我需要根据特定属性的值为单个系列的精灵的不同部分着色，并使用不同的颜色

例如，我有2个服务，服务1和服务2在Yaxis上表示，X轴是0-12之间的数字轴

我想从x轴的0-1将Service1涂成绿色，从x轴的1-2将Service1涂成红色

我曾尝试对精灵使用“渲染器”（renderer）属性，但当精灵作为一个整体进行渲染时，仅调用一次该属性，但我希望为精灵的部分着色

这是否可能使用extjs图表。如果是的话，我如何才能做到这一点

 {
           type: 'line',
               xField: 'hour',
               yField: 'srvdata',
               showMarkers: false,
               style: {
                    stroke: 'green',
                    'stroke-width': 2,
                    fill: 'green',
                    //opacity: 0.2
                },
                /*renderer: function(sprite, record, attr, index, store) {
                    console.log(record);
                    return Ext.apply(sprite, {
                        fill: 'red',
                        stroke: 'red'
                    });
                }*/
      },

---

可以肯定的是，您不能用这种方式更改线条颜色

renderer: function(sprite, record, attr, index, store) 
{
    // By changing sprite.fill or stroke, you are just changing the color of your point
};

---

不知道如何准确地改变线的颜色，我也被这个问题困扰着。但我知道surface:Ext.draw.surface需要更改。喜欢尝试通过chart.draw.Surface.addsprite函数添加精灵。

以上任何建议都将不胜感激，因为我完全被卡住了。