在新窗口中打开Highcharts xAxis链接

Question

我正在尝试为Highcharts中xAxis中列出的类别创建链接

$(function () {
    $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar'],
            title: {
            text: 'Day of Month'
            },
            labels: {
                formatter: function () {
                    return '<a href="http://www.google.com?q=' + this.value + '">' +
                        this.value + '</a>';
                }
            }
        },
        series: [{
            data: [300, 200, 600]
        }]
    });
});

但是问题是我无法在新窗口中打开链接（即使添加target =“ _ blank”

演示：http://www.java2s.com/Tutorials/highcharts/Example/Axis_Label/Format_axis_label_with_link.htm

链接：https://jsfiddle.net/6zd02pwo/1/

Answer 1

如果您想自己管理标签，则可能需要使用纯HTML

labels: {
  formatter: function () {
    return '<a href="http://www.google.com?q=' + this.value + '" target="_blank">' +
                    this.value + '</a>';
  },
  useHTML: true
}

但是，在这种情况下，您也必须自己管理样式

UPDATE

如果您要使用相同的highcharts代码和样式，则可以采用更多破解方法但不能保证它可以在任何后续版本中正常使用]

$('#container .highcharts-axis-labels:first tspan').click(function() {
    window.open('https://www.google.com?q=' + $(this).text(), '_blank');
});

Answer 2

正如Ignor所说，请使用自定义标签。我只想在Igor的答案中添加围绕“ this”的上下文

这是我的代码示例

    //creating my names array (array of labels)
    var names = [];

    //ranging through result above then pushing each result into names
    names.push('<a href="https://www.google.com/search?q=' + result[i].ticker + ' target="_blank">' + result[i].name + '</a>');

    //here is the xAxis section of my Highcharts.chart(){}

    xAxis: {
       //names is an array of labels
        categories: names,
        title: {
            text: null
        },
        labels:{
        //pipe names array into function
          formatter:function(names){
        //call each value within names -- High charts is ranging through so no need to range through yourself
            return names.value;
          },
          useHTML:true
        }
    },