Extjs-带有山形矩形Sprite的折线图

Question

我的要求是： 我必须创建一个在其顶部具有可拖动山墙矩形的折线图。这样，当我拖动矩形时，它将显示不同的时间段。 作为- enter image description here

问题： 可拖动项与-按钮，矩形等一起作为单独的组件使用。但是，当我尝试向折线图添加矩形精灵并尝试使精灵可拖动时，它将无法工作。

我正在尝试以下代码。

  

扩展应用程序（{       名称：“小提琴”，

launch: function () {

    var main = Ext.create('Ext.chart.CartesianChart', {
        renderTo: Ext.getBody(),
        width: 300,
        height: 100,
        margin: 5,

        store: {
            fields: ['years'],
            data: [{
                years: '2016',
            }, {
                years: '2017',
            }, {
                years: '2018',
            }]
        },
        axes: [{
            type: 'category',
            title: 'Years',
            position: 'bottom',
            fields: 'years',
            grid: true
        }],
        series: [{
            type: 'line',
            xField: 'years'
        }, {
            type: 'line',
            xField: 'years'
        }, {
            type: 'line',
            xField: 'years'
        }]
    });

    main.getSurface().add({
        type: 'rect',
        height: 20,
        width: 100,
        fill: '#FCE5C5',
        stroke: '#C6B395'
    });
    main.renderFrame();
} });

这是Fiddle

有什么办法-  1.绘制折线图  2.在折线图上绘制一个矩形精灵  3.使矩形Sprite可拖动。