Amcharts - So öffnen Sie den Link in einem neuen Tab/Fenster

Question

Ich versuche, Diagramm mit Amcharts zu machen. Damit habe ich die Kategorien als Links, die ich in einem neuen Tab/Fenster öffnen möchte. Ich habe den folgenden Code hinzugefügt, der den Link in einem neuen Tab/Fenster öffnet, aber gleichzeitig den Link im selben Tab öffnet. Bitte sag was ich falsch mache. Ich möchte Jquery nicht verwenden und ich bin neu in Javascript.

Dies ist der Code, den ich für die Öffnung der Kategorie Link in neuem Tab zum Javascript hinzugefügt -

window.open(event.serialDataItem.dataContext.url, '_blank'); 

Das sind die ursprünglichen amCharts ist codepen - https://codepen.io/team/amcharts/pen/50c8b6a103e7126fac91ce40000192be

Dies ist der Code-Schnipsel ist -

var chart = AmCharts.makeChart("chartdiv", { 
 
    "type": "serial", 
 
    "theme": "light", 
 
    "addClassNames": true, 
 
    "titles": [{ 
 
    "text": "Open this demo in a separate window for links to work" 
 
    }], 
 
    "dataProvider": [{ 
 
    "country": "USA", 
 
    "visits": 2025, 
 
    "url": "https://codepen.io" 
 
    }, { 
 
    "country": "China", 
 
    "visits": 1882, 
 
    "url": "https://codepen.io" 
 
    }, { 
 
    "country": "Japan", 
 
    "visits": 1809, 
 
    "url": "https://codepen.io" 
 
    }, { 
 
    "country": "Germany", 
 
    "visits": 1322, 
 
    "url": "https://codepen.io" 
 
    }, { 
 
    "country": "UK", 
 
    "visits": 1122, 
 
    "url": "https://codepen.io" 
 
    }, { 
 
    "country": "France", 
 
    "visits": 1114, 
 
    "url": "https://codepen.io" 
 
    }, { 
 
    "country": "India", 
 
    "visits": 984, 
 
    "url": "https://codepen.io" 
 
    }, { 
 
    "country": "Spain", 
 
    "visits": 711, 
 
    "url": "https://codepen.io" 
 
    }, { 
 
    "country": "Netherlands", 
 
    "visits": 665, 
 
    "url": "https://codepen.io" 
 
    }, { 
 
    "country": "Russia", 
 
    "visits": 580, 
 
    "url": "https://codepen.io" 
 
    }, { 
 
    "country": "South Korea", 
 
    "visits": 443, 
 
    "url": "https://codepen.io" 
 
    }, { 
 
    "country": "Canada", 
 
    "visits": 441, 
 
    "url": "https://codepen.io" 
 
    }, { 
 
    "country": "Brazil", 
 
    "visits": 395, 
 
    "url": "https://codepen.io" 
 
    }], 
 
    "valueAxes": [{ 
 
    "gridColor": "#FFFFFF", 
 
    "gridAlpha": 0.2, 
 
    "dashLength": 0 
 
    }], 
 
    "gridAboveGraphs": true, 
 
    "startDuration": 1, 
 
    "graphs": [{ 
 
    "balloonText": "[[category]]: <b>[[value]]</b>", 
 
    "fillAlphas": 0.8, 
 
    "lineAlpha": 0.2, 
 
    "type": "column", 
 
    "valueField": "visits" 
 
    }], 
 
    "chartCursor": { 
 
    "categoryBalloonEnabled": false, 
 
    "cursorAlpha": 0, 
 
    "zoomable": false 
 
    }, 
 
    "categoryField": "country", 
 
    "categoryAxis": { 
 
    "gridPosition": "start", 
 
    "gridAlpha": 0, 
 
    "tickPosition": "start", 
 
    "tickLength": 20, 
 
    "listeners": [{ 
 
     "event": "clickItem", 
 
     "method": function(event) { 
 
     window.location.href = event.serialDataItem.dataContext.url; 
 
\t \t \t \t window.open(event.serialDataItem.dataContext.url, '_blank'); 
 
     } 
 
    }] 
 
    } 
 

 
});

#chartdiv { 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 

 
.amcharts-axis-label { 
 
    cursor: pointer; 
 
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/serial.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
 
<div id="chartdiv"></div>

Answer 1

Sie sollten die Zeile entfernen ..

window.location.href = event.serialDataItem.dataContext.url; 

.. von Ihrem clickItem Zuhörer.

Diese Zeile weist den Browser an, den aktuellen Seitenspeicherort zu ersetzen. Im Grunde verhindert diese Zeile, dass die nächste Zeile ausgeführt wird.

sollte diese Arbeit:

"listeners": [{ 
    "event": "clickItem", 
    "method": function(event) { 
    window.open(event.serialDataItem.dataContext.url, '_blank'); 
    } 
}] 

Es ist nicht in einer Codepen Umgebung funktionieren könnte, aber es sollte an anderer Stelle arbeiten.