Amcharts - 新しいタブ/ウィンドウでリンクを開く方法

Question

amchartsを使用してグラフを作成しようとしています。そこでは、新しいタブ/ウィンドウで開くリンクとしてカテゴリを持っています。新しいタブ/ウィンドウにリンクを開く次のコードを追加しましたが、同時に同じタブにリンクも開きます。私が間違っていることを教えてください。私はJqueryを使いたくないし、私はjavascriptを初めて使っている。

これは私が新しいタブでカテゴリのリンクを開くためのJavaScriptに追加されたコードである -

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

これはcodepen元AmChartsある - https://codepen.io/team/amcharts/pen/50c8b6a103e7126fac91ce40000192be

これは抜粋です -

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

あなたのclickItemリスナーから..

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

を行を削除する必要があります。

この行は、ブラウザに現在のページの場所を置き換えるように指示します。基本的に、この行は次の行の実行を防ぎます。

これは動作するはずです：

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

それはCodepen環境では動作しない場合がありますが、それは他の場所で動作するはずです。