График Amcharts - Гиперссылка для столбцов диаграммы на пользовательские URL-адреса для открытия в новой вкладке / окне

Question

График Amcharts - Гиперссылка для столбцов диаграммы на пользовательские URL-адреса для открытия в новой вкладке / окне

1

Я пытаюсь сделать диаграмму amcharts со столбцами, связанными с пользовательскими URL-адресами, и хочу, чтобы URL-адреса открывались в новой вкладке/окне. Я попытался добавить этот код к объекту графа, но он не работает, он открывает ссылку в той же вкладке/окне -

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

Пожалуйста, расскажите, что я делаю неправильно. Я не хочу использовать JQuery, и я новичок в javascript.

Это мой фрагмент -

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [{
    "country": "USA",
    "visits": 2025,
    "url": "https://en.wikipedia.org/wiki/United_States"
  }, {
    "country": "China",
    "visits": 1882,
    "url": "https://en.wikipedia.org/wiki/China"
  }, {
    "country": "Japan",
    "visits": 1809,
    "url": "https://en.wikipedia.org/wiki/Japan"
  }, {
    "country": "Germany",
    "visits": 1322,
    "url": "https://en.wikipedia.org/wiki/Germany"
  }, {
    "country": "France",
    "visits": 1114,
    "url": "https://en.wikipedia.org/wiki/France"
  }, {
    "country": "India",
    "visits": 984,
    "url": "https://en.wikipedia.org/wiki/India"
  }, {
    "country": "Spain",
    "visits": 711,
    "url": "https://en.wikipedia.org/wiki/Spain"
  }],
  "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",
    "listeners": [{
      "event": "clickItem",
      "method": function(event) {
window.open(event.serialDataItem.dataContext.url, '_blank');
      }
    }],
    "urlField": "url"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0,
    "tickPosition": "start",
    "tickLength": 20
  }
});

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

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

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>

<div id="chartdiv"></div>

user20152015 24 окт. 2017, в 00:21

Источник

0

Если вы назначите window.open() для var тогда (если у вас есть доступ к CORS), вы можете сделать как newWindowVar.document.getElementById() и тому подобное. Или вы можете сделать ссылку на определенную страницу и использовать target='_blank' . Не забывайте поддерживать совместимость с XHTML, для которого вы хотите назначить целевой атрибут с помощью JavaScript.
StackSlave 23 окт. 2017, в 21:48
0

@PHPglue Что такое доступ к CORS? Можете ли вы попробовать этот фрагмент или этот jsfiddle - jsfiddle.net/1ayr47bx/1
user20152015 23 окт. 2017, в 21:50
0

Обмен ресурсами между источниками. Если вы создаете обе страницы в одном домене, вам не нужно беспокоиться об этом. Если нет, вам потребуется разрешение от другого сайта, чтобы использовать JavaScript с вашего сайта на их.
StackSlave 23 окт. 2017, в 21:52
0

@PHPglue Я очень новичок в Javascript. Вот почему я поставил полный фрагмент / jsfiddle. Можете ли вы отредактировать и показать метод работы в ответе?
user20152015 23 окт. 2017, в 21:55

Показать ещё 2 комментария

Теги:

javascript

url

amcharts

2 ответа

0

+ Изменить

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

в

listeners:[{
  event:'clickItem',
  method:function(event){
    open(event.item.url, '_blank');
  }
}]

PHPglue 23 окт. 2017, в 20:34

0

Я изменил это в коде API Amcharts (см. Фрагмент в моем вопросе). Но он по-прежнему открывает пользовательский URL в той же вкладке / окне при нажатии на столбец
user20152015 23 окт. 2017, в 22:34

Ещё вопросы

Если вы назначите window.open() для var тогда (если у вас есть доступ к CORS), вы можете сделать как newWindowVar.document.getElementById() и тому подобное. Или вы можете сделать ссылку на определенную страницу и использовать target='_blank' . Не забывайте поддерживать совместимость с XHTML, для которого вы хотите назначить целевой атрибут с помощью JavaScript.
@PHPglue Что такое доступ к CORS? Можете ли вы попробовать этот фрагмент или этот jsfiddle - jsfiddle.net/1ayr47bx/1
Обмен ресурсами между источниками. Если вы создаете обе страницы в одном домене, вам не нужно беспокоиться об этом. Если нет, вам потребуется разрешение от другого сайта, чтобы использовать JavaScript с вашего сайта на их.
@PHPglue Я очень новичок в Javascript. Вот почему я поставил полный фрагмент / jsfiddle. Можете ли вы отредактировать и показать метод работы в ответе?
Я изменил это в коде API Amcharts (см. Фрагмент в моем вопросе). Но он по-прежнему открывает пользовательский URL в той же вкладке / окне при нажатии на столбец

Darlesson · Accepted Answer · 2017-10-24T02-13-00.000Z

Вы можете использовать urlTarget, например:

var chart = AmCharts.makeChart("chartdiv", {
  "graphs": [{
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits",
    "urlField": "url",
    "urlTarget": "_blank"
  }],
  ...
};