Highcharts可点击列以在同一站点上打开另一个页面

Question

我正在制作一个生成图表的脚本（Highcharts）。 这工作正常，但我想添加一个“点击”功能，点击时打开同一网站上的另一个scropt。 阅读可点击的列后，我不知道如何使其工作。

如何点击列google.com

我的代码是：

$(function () {

var categories=[];
var data2 =[];


var chart;
$(document).ready(function() {

$.getJSON("../charts/imaint_audit_water_temp_cold_chart.php", function(json) {
  $.each(json,function(i,el) {
  if (el.name=="Count")
      categories = el.data;
  else data2.push(el);
});

$('#container1').highcharts({
chart: {
   renderTo: 'container',
   type: 'column',
   marginTop: 40,
   marginRight: 30,
   marginBottom: 50,
   plotBackgroundColor: '#FCFFC5'
},

title: {
   text: 'Failed cold water temperatures',
   x: -20, //center
   style: {
       fontFamily: 'Tahoma',
       color: '#000000',
       fontWeight: 'bold',
       fontSize: '10px'
   }
},

subtitle: {
   text: '',
   x: -20
},
xAxis: {
   labels: {
       enabled: false
   }
},

yAxis: {
   showFirstLabel: false,
   lineColor:'#999',
   lineWidth:1,
   tickColor:'#666',
   tickWidth:1,
   tickLength:2,
   tickInterval: 10,
   gridLineColor:'#ddd',

   title: {
      text: '',
      style: {
         fontFamily: 'Tahoma',
         color: '#000000',
         fontWeight: 'bold',
         fontSize: '10px'
      }
  },

plotLines: [{
   color: '#808080'
}]
},

legend: {
   enabled: true,
   itemStyle: {
      font: '11px Trebuchet MS, Verdana, sans-serif',
      color: '#000000'
   },
   itemHoverStyle: {
      color: '#000000'
   },
   itemHiddenStyle: {
      color: '#444'
   }
 },


colors: [
   '#0066CC',
   '#FF2F2F',
],

plotOptions: {
   series: {
      point: {
         events: {
            click: function() {

            }
         }
  }
},
legendIndex:0,

dataLabels: {
enabled: true,
color: '#000000',
align: 'center',
cursor: 'pointer',
y: 0, // 10 pixels down from the top
style: {
   fontSize: '10px',
   fontFamily: 'Verdana, sans-serif'
}
}
}
},

credits: {
   enabled: false
},

series: data2
});
});

});
});

非常感谢你的时间。

Answer 1

这里有解释： http ： //api.highcharts.com/highcharts#plotOptions.series.point.events.click

您可以使用每个栏中的自定义网址完成此操作：

plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {
                            location.href = this.options.url;
                        }
                    }
                }
            }
        },

        series: [{
            data: [{
                y: 29.9,
                url: 'http://bing.com/search?q=foo'
            }, {
                y: 71.5,
                url: 'http://bing.com/search?q=bar'
            }, {
                y: 106.4,
                url: 'http://bing.com/search?q=foo+bar'
            }]
        }]

工作小提琴： http ： //jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-point-events-click-url/

或者所有相同的网址：

point: {
                    events: {
                        click: function () {
                            location.href = "http://stackoverflow.com";
                        }
                    }
                }

希望能帮助到你！

UPDATE

如果在框架中，您可以尝试使用：

window.top.location.href='URLGoesHere';

“_top”加载顶级框架集中的内容（实际上是整个浏览器窗口），无论当前框架下方有多少嵌套级别