1

我正在使用 Sencha 触摸甜甜圈图。现在我正在寻找甜甜圈图表部分中的工具提示显示。在互联网上搜索后，我发现 sencha 触摸图表中没有像我们在 EXTJS 中那样的工具提示库。

请让我知道我们是否可以在 sencha 触摸图表中使用 EXTJS 工具提示代码，如果不能，请帮助我提供一些链接，sencha 触摸图表工具提示的示例。

我在我的 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

在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 回答
1

这是一个旧线程，但发布我的解决方案可能对某人有帮助。

我正在使用甜甜圈图，所以这个解决方案对我有用。我所做的是使用 HTML 中的 DIV 元素完成的自定义工具提示，并根据 PIE 的中心定位它。

一旦 DIV 准备好并设置样式，

在 下Items:[]，创建 piegrouping 并在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 回答