2

我在窗口面板中有煎茶甜甜圈图，在另一个面板中有文本精灵。但我需要将此精灵与圆环图集成，这样如果我移动图表，添加的文本精灵也会相应移动。

这是我的代码：

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>

我在考虑两种不同的方法：

1）如果我们可以获得圆环图中心点的 X/Y 坐标，那么我们可以将精灵添加到该 X/Y 坐标。

2）我们可以将面板添加到图表中，然后将drawComponent或sprite添加到该面板。

请让我知道我们如何做到这一点。

谢谢！！

4

0 回答 0