2016-03-29 14 views
1

Ich hoffe, jemand kann mir helfen, ein Highcharts-Diagramm zu erstellen, das beim Klicken auf die Spalte/Leiste ein neues Fenster geöffnet wird. Sehr viel wie der HTML-Äquivalent:Wie öffne ich ein neues Fenster/einen neuen Tab, indem ich auf eine Spalte/einen Balken in einem Highchart-Graphen klicke?

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

ich es geschafft haben, dies zu tun, ohne ein neues Fenster zu schaffen und ich hatte gehofft, dass jemand könnte in der Lage sein, mir zu sagen, was ich brauche anpassen für ein neues Popup-Fenster gerecht zu werden ?

Ich habe ein Beispiel an jsfiddle

, die im Wesentlichen der folgende Code:

$(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>

Ich dachte, es könnte so etwas wie die folgenden sein, die falsch ist:

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

Vielen Dank im Voraus.

Antwort

4

In series.point.events.click können Sie Ihre Aussage wechseln:

location.href = this.options.url; 

Mit (update JSFiddle):

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

, die dann die URL in einem neuen Fenster geöffnet.