javascript - HighCharts 单击时将 div 添加到系列

Question

我有 Highcharts ，在图表中单击每个栏时我想创建一个弹出窗口，我正在使用 jquery 气球弹出插件。这是代码

plotOptions: {
            series: {
                slicedOffset: 0,
                cursor: 'pointer',
                stacking: 'normal',
                point: {
                    events: {

                        click: function (e) {
                            $(e).showBalloon({
                           contents: 'Hello'
                           });
                        }
                    }
                }

SCRIPT16386 说它不起作用:不支持这样的接口(interface)。我认为最好添加普通的 HTML 元素(单击时将 div 添加到系列)并对其执行气泡操作，但我无法向其添加 div。这是代码，

  $(e).append("<div>hello world</div>");

但它说 SCRIPT5007:无法获取属性“createDocumentFragment”的值:对象为 null 或未定义。任何人都可以帮我找出错误吗？

我能够使用它来显示弹出的气球，

  $($(e.target)).showBalloon({
        contents: '<div ng-controllrt="chartController"<a href="javascript::void(0)" ng-click="test()"> Click </a></div>'
    });

但问题是工具提示从来没有在 Angular 范围内，它在范围之外。我很快就会尝试发布 fiddle 。但是，要了解这里的代码结构是如何完成的，这里的图表配置是单独的js文件，

var chartService = function($rootScope){

var setConfig = function(chartData,$scope){
  $roorScope.chartConfig = {


  chart: { // options}

  };

plotOptions: {
            series: {
                slicedOffset: 0,
                cursor: 'pointer',
                stacking: 'normal',
                point: {
                    events: {

                        click: function (e) {
                            $(e).showBalloon({
                           contents: 'Hello'
                           });
                        }
                    }
                }
};
return {
setConfig: function(chartData,$scope){
return setConfig(chartData,$scope);
}
};
};

在我的 Controller 中，我将其注入(inject)为服务并调用 setConfig

var myController = function ($rootScope,){

 chartService.setConfig(data,$scope);

//this is the scope function I wanted to execute whenever user clicks on the       anchor link in the jquery Balloon Pop Up

$scope.test = function () {
alert("test");
}; 
};

但是点击从未发生，任何人都可以告诉我可能是什么问题吗？

Answer 1

我成功了。尽管这不是一个有效的方法。这是工作。您需要迭代所有点并关闭气球。因此，迭代和关闭气球可以通过使用sibling和hideBalloon来实现，

 $(e.target).siblings().each(function () {
    $(this).hideBalloon();
 });

对于初始化部分，它与您在问题中提到的相同。因此，代码如下所示，

 click: function (e) {
           $(e.target).siblings().each(function () {
                  $(this).hideBalloon();
           });
           $(e.target).showBalloon({
                  classname: "balloonTip",
                  contents: 'Hello'
           });
        },

这是一个 working fiddle .