带工具提示的 FusionCharts

Question

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

Answer 1

设法通过使用 bootstrap 弹出窗口、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'
                                })
                            }
                   );
                }
            }

带工具提示的 FusionCharts

FusionCharts with tooltip

javascript

fusioncharts