如何通过单击 Highchart 图表中的柱形/条形来打开新的 window / 选项卡？

Question

我希望有人可以帮助我创建一个 Highcharts Graph，当单击该列/栏时，会打开一个新的 window。非常类似于 HTML 相当于：

<a target="_blank">test</a>

我在没有创建新的 window 的情况下设法做到了这一点，我希望有人能够告诉我我需要调整什么以适应新的 window 弹出窗口？

我在 jsfiddle

有一个例子

基本上是下面的代码：

$(function () {

    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Title'
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories: ["category_1", "category_2", "category_3", "category_4"],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Count'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        legend: {
            labelFormatter: function () {
                var total = 0;
                for (var i = this.yData.length; i--; ) {
                    total += this.yData[i];
                }
                ;
                return 'Total: ' + total;
            },
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 60,
            floating: true
        },
        plotOptions: {column: {pointPadding: 0.2, borderWidth: 0, dataLabels: {enabled: true}}, },
        series: [{
            name: 'Live Trial Lead Sources',
            data: [{"y":111,"url":"http:\/\/www.google.ie"},{"y":44,"url":"http:\/\/www.google.ie"},{"y":22,"url":"http:\/\/www.google.ie"},{"y":10,"url":"http:\/\/www.google.ie"}],
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                        location.href = this.options.url;
                    }
                }
            }
        }]
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

我认为可能是下面这样的错误：

[{"y":111,"url":"http:\/\/www.google.ie","target"=>"_blank"} ...

提前致谢。

Answer 1

在series.point.events.click中你可以切换你的语句：

location.href = this.options.url;

与 (update JSFiddle):

window.open(this.options.url, '_blank');

然后将在新的 window 中打开 URL。

如何通过单击 Highchart 图表中的柱形/条形来打开新的 window / 选项卡？

How do I open a new window / tab by clicking on a column / bar within a Highchart graph?

javascript

window

hyperlink

target

highcharts