extjs - sencha touch chart にスプライトを追加する方法

Question

ウィンドウ パネルに煎茶ドーナツ チャートを、別のパネルにテキスト スプライトを配置しました。しかし、このスプライトをドーナツ チャートと統合する必要があるため、チャートを移動すると、追加されたテキスト スプライトがそれに応じて移動します。

これが私のコードです：

Ext.setup({
    tabletStartupScreen: 'tablet_startup.jpg',
    phoneStartupScreen: 'phone_startup.jpg',
    tabletIcon: 'icon-ipad.png',
    phoneIcon: 'icon-iphone.png',
    glossOnIcon: false,

    requires: ['Ext.chart.Panel',
        'Ext.chart.axis.Numeric',
        'Ext.chart.axis.Category',
        'Ext.chart.series.Pie'],
    onReady: function () {

    var donut = false;
        window.initExample('Pie Chart',
            "This example's uses many interactions.<br><ul>" +
                "<li>Dragging the Pie Chart will rotate it.</li>" +
                "<li>Tap and hold will bring up additional information about a slice</li>" +
                "<li>Double-Tap will reset the chart back to the initial state (after confirmation)</li>");
        window.createPanel(new Ext.chart.Chart({
            themeCls: 'pie1',
            theme: 'Demo',
            store: store1,
            shadow: false,
            animate: true,
            insetPadding: 20,
            legend: {
                position: 'left'
            },
            interactions: [
                {
                    type: 'reset',
                    confirm: true
                },
                {
                    type: 'rotate'
                },
                'itemhighlight',
                {
                    type: 'iteminfo',
                    gesture: 'longpress',
                    listeners: {
                        show: function (interaction, item, panel) {
                            var storeItem = item.storeItem;
                            panel.setHtml(['<ul><li><b>Month: </b>' + storeItem.get('name') + '</li>', '<li><b>Value: </b> ' + storeItem.get('2007') + '</li></ul>'].join(''));
                        }
                    }
                }
            ],
            series: [
                {
                    type: 'pie',
                    field: '2007',
                    showInLegend: true,
                    highlight: false,
                    donut: 50,
                    listeners: {
                        'labelOverflow': function (label, item) {
                            item.useCallout = true;
                        }
                    },
                    // Example to return as soon as styling arrives for callouts
                    callouts: {
                        renderer: function (callout, storeItem) {
                            callout.label.setAttributes({
                                text: storeItem.get('name')
                            }, true);
                        },
                        filter: function () {
                            return false;
                        },
                        box: {
                            //no config here.
                        },
                        lines: {
                            'stroke-width': 2,
                            offsetFromViz: 20
                        },
                        label: {
                            font: 'italic 14px Arial'
                        },
                        styles: {
                            font: '14px Arial'
                        }
                    },
                    label: {
                        field: 'name'
                    }
                }
            ]
        }));
            mydrawComponent = new Ext.draw.Component({
               id:'mydrawComponent',
            fill:'blue',
            height: '100%',
            width: '100%',
            fullscreen: true,
            items: [{type: 'text',
                'text-anchor':'center',
                fill: 'black',
                font: '20px Arial',
                text: 'Investment',
                x: 860,
                y: 380,
                zIndex: 2},
                {type: 'text',
                'text-anchor':'center',
                fill: 'black',
                font: 'Bold 30px Arial',
                text: '$165m',
                x: 860,
                y: 410,
                zIndex: 3}]
        }).show();
        new Ext.chart.Panel({
        fullscreen: true,
        title: 'Text',
        items: mydrawComponent
          });
    }
});

これは、煎茶タッチ ドーナツ チャートの JavaScript コードです。ここにhtmlコードがあります：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="../CSS/sencha-touch.css" type="text/css">
    <link rel="stylesheet" href="../CSS/touch-charts-demo.css" type="text/css">

    <title>Donut Chart</title>
    <script type="text/javascript" src="../JS/sencha-touch.js"></script>
    <script type="text/javascript" src="../JS/touch-charts.js"></script>
    <script type="text/javascript" src="../JS/examples.js"></script>
    <script type="text/javascript" src="donutchart.js"></script>
</head>
<body></body>
</html>

私は2つの異なるアプローチを考えていました：

1) ドーナツ チャートの中心点の X/Y 座標を取得できれば、その X/Y 座標にスプライトを追加できます。

2) チャートにパネルを追加し、そのパネルに drawComponent またはスプライトを追加できます。

これを行う方法を教えてください。

ありがとう！！