ExtJS 6 - 如何在图表上显示提示？

Question

我们一直在使用 series 的 tips 配置，以便为 ExtJS 4 & 5 设置交互提示。但是对于 ExtJS 6，它不再起作用了。那么使用 ExtJS 6 图表包显示提示的正确方法是什么？

series: [{
    type: 'pie',
    field: 'count',
    showInLegend: true,
    donut: false,
    tips: {
        trackMouse: true,
        width: 140,
        height: 40,
        renderer: function(storeItem, item) {
            this.update(storeItem.get('name') + ':' + storeItem.get('count'));
        }
    }
}]

Answer 1

您似乎从 ext-charts 切换到了 sencha-charts。

tips 属性不再 Series :

ExtJS 4 - http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.chart.series.Series-cfg-tips

ExtJS 6 - http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.chart.series.Series

试试tooltip 属性应该和之前tips一样

Answer 2

看起来工具提示 renderer 方法参数已在版本之间交换，否则您的 fiddle 就差不多了。 this 关键字似乎是系列而不是工具提示 - 最好不要依赖 ExtJS 中的 JS 上下文，Sencha 似乎在重构 API 时做出努力，以确保您可以始终期望将相关组件的引用作为任何回调的第一个参数。

如果您查看 API 中的 series-tooltip，它将确认第一个参数是对工具提示的引用，第二个参数是所选记录 - 因此您可以更新工具提示如下：

{
    xtype: 'pie'
    // ...
    tooltip: {
        // ...
        renderer: function(tip, item){
            tip.update(item.get('name') + ': ' + item.get('count'));
        }
    }
}

» updated fiddle

Answer 3

tooltip: {
  trackMouse: true,
  renderer: function(toolT, storeItem) {
              toolT.setHtml('dummy tooltip');
  }
}

试试这个。

ExtJS 6 - 如何在图表上显示提示？

ExtJS 6 - How to show tips on charts?

extjs

extjs6

extjs6-classic