Amcharts

Question

我正在尝试使用 amcharts 制作图表。在那里，我有 links 类别，我想在新的 tab/window 中打开它们。我添加了以下代码，它在新的 tab/window 中打开 link，但同时也在同一选项卡中打开 link。请告诉我我做错了什么。我不想使用 Jquery 并且我是 javascript.

的新手

这是我添加到 javascript 的代码，用于在新标签页中打开类别 link -

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

这是原始的 AmCharts codepen - 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;
    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

您应该删除行 ..

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

.. 来自您的 clickItem 监听器。

这一行指示浏览器替换当前页面位置。基本上这一行阻止了下一行的执行。

这应该有效：

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

它可能无法在 Codepen 环境中运行，但在其他地方应该可以运行。

Amcharts - 如何在新 tab/window 中打开 link

Amcharts - How to open link in a new tab/window

javascript