1

Sencha touch ドーナツチャートを使用しています。今、ドーナツ チャート セクションでのツールチップ表示を探しています。インターネットで検索したところ、EXTJS にあるようなツールチップ ライブラリが sencha touch chart にないことがわかりました。

EXTJS ツールチップ コードを sencha touch チャートに使用できるかどうか教えてください。そうでない場合は、いくつかのリンク、sencha touch チャートのツールチップの例を教えてください。

sencha touch ドーナツ チャート JS でこのコードを使用していますが、これは機能しません。

   var tip = Ext.create('Ext.tip.ToolTip', {
        target: 'donut-chart',
        html: '<font size="2" color="white"><span style="padding-left:2px"><B>Electronics &nbsp;&nbsp; $15.3m</B></span> <br><br> <span style="padding-left:2px">%Total &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;13%</span></font>',
        width: 150,
        height: 6,
        Border: 'false',
        bodyStyle: 'background-color: teal;',
        style: 'background-color: white;opacity: 0.5;'
     }); 
     tip.showAt(200, 100);

助けてください...

ありがとう！

4

2 に答える 2

1

これは古いスレッドですが、誰かの役に立つかもしれないので、私の解決策を投稿してください。

私はドーナツ チャートを使用しているので、この解決策はうまくいきます。私が行ったのは、HTML の DIV 要素で作成されたカスタム ツールチップで、PIE の中心に基づいて配置されます。

DIV の準備とスタイリングが完了したら、

の下で、円グループ化を作成し、次のようにグループ化のイベントでItems:[]ツールチップを再配置します。onSelectionChange

{
    type: 'piegrouping',
    onSelectionChange: function(me, items) {
        if (items.length) {
            if(items.length<2)
            {
                var tipX=items[0].middle.x - 35;
                var tipY=items[0].middle.y - 35;

                $('.tooltip').css('left', tipX + 'px');
                $('.tooltip').css('top', tipY + 'px');

                $('.tooltip h1').html(sum);
                $('.tooltip').fadeIn(500);
            } else {
                $('.tooltip').hide();
            }
        }
        else {
            $('.tooltip').hide();
        }
}
于 2012-11-08T03:33:53.103 に答える
1

には、円グラフをドーナツ グラフとして設定Sencha Touch Pie Chartsするプロパティがあります。donut

デフォルト値はfalseです。このプロパティを次のように設定できます。true

donut: true,

そして、このようなtipsプロパティを使用して、PieChart

tips: {
  trackMouse: true,
  width: 140,
  height: 28,
  renderer: function(storeItem, item) {
    this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
  }
},
于 2012-05-17T09:11:43.840 に答える