带有工具提示的 FusionCharts答案

【问题标题】：FusionCharts with tooltip带有工具提示的 FusionCharts
【发布时间】：2019-12-11 15:29:55
【问题描述】：

我正在使用 FusionCharts 来实现带有锚点的折线图，并希望在鼠标悬停时看到工具提示。标准工具提示是浮动的而不是锚定的。有这种可能吗？工具提示文本存储在数据集中。我该如何设计它？

【问题讨论】：

我认为核心库不支持这种自定义，但您可以发送邮件至 support@fusioncharts.com，他们可以为您提供自定义解决方案。

【解决方案1】：

通过使用引导弹出窗口、jQuery 和 FusionCharts 事件设法解决了这个问题：

 "events": {
               "drawComplete": function (eventObj) {
                    let lineDataset = eventObj.sender.args.dataSource.dataset.filter(function (dataset){return dataset.renderAs === 'line' && dataset.data.length > 0})[0];

                    let dataPlots = lineDataset.data.filter(function (obj) { return obj.anchorRadius != "0" });
                    var targetImages = $('g[class$="-line"] g[class$="-plot-group"]:last-child').prev().find("image:visible");//Linechart visible Anchors

                    //Built-in FusionCharts tooltip cannot be styled properly and anchored so we have to use bootstrap popover
                    targetImages.each(
                        function (index, image) {
                        $(image).popover({
                                content: dataPlots[index].tooltext,
                                placement: 'right',
                                trigger: 'hover'
                                })
                            }
                   );
                }
            }

【讨论】：