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
}

然而，在这种情况下，您还必须自己管理自己的风格

更新

如果你想使用相同的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
        }
    },

在新窗口中打开Highcharts xAxis链接

2 个答案: