sencha 触摸图表工具提示显示

Question

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

请让我知道我们是否可以将 EXTJS 工具提示代码用于 sencha 触摸图表，如果不能，请帮助我提供一些链接，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);

请帮忙...

谢谢！

Answer 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();
        }
}

Answer 2

在Sencha Touch Pie Charts 中，有一个属性donut 可以将饼图设置为甜甜圈图。

默认值为false。您可以将此属性设置为true

donut: true,

然后像这样使用PieChart的tips属性，

tips: {
  trackMouse: true,
  width: 140,
  height: 28,
  renderer: function(storeItem, item) {
    this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
  }
},