Question

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

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

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

它不起作用说SCRIPT16386：不支持这样的接口。我认为最好添加普通的HTML元素（在点击时为系列添加div）并对其执行冒泡，但我无法添加div。这是代码，

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

但是它说SCRIPT5007：无法获得属性的值＆＃39; createDocumentFragment＆＃39;：对象为null或未定义。任何人都可以帮我找到错误吗？

我能够使用此功能弹出气球

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

但问题是工具提示从未在角度范围内，它不在范围之内。我会尽快发布一个小提琴。但是，要了解这里的代码结构是怎么做的，这里的图表配置是单独的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);
}
};
};

在我的控制器中，我将其注入服务并调用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'
           });
        },

HighCharts在点击时将div添加到系列

1 个答案:

这是一个working fiddle。