AmCharts 4 Donut Graph — гиперссылка для пользовательского URL-адреса

Я не могу получить гиперссылку на этот пончик график в amcharts4. Я сделал это успешно, используя amcharts 3, но я не получаю его в amcharts4.

Пожалуйста, дайте мне знать, что я делаю неправильно.

Я также сослался на другой документацию, но не смог получить от нее помощи.

Вот мой сценарий:

am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.PieChart3D);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart.data = [
  {
    country: "India",
    litres: 501.9,
    url:"amcharts.com/docs/v4/tutorials/clickable-links-in-tooltips/"
  },
  {
    country: "Czech Republic",
    litres: 301.9,
    url:"amcharts.com/docs/v4/tutorials/clickable-links-in-tooltips/"
  },
  {
    country: "China",
    litres: 201.1,
    url:"amcharts.com/docs/v4/tutorials/clickable-links-in-tooltips/"
  },
  {
    country: "Germany",
    litres: 165.8,
    url:"amcharts.com/docs/v4/tutorials/clickable-links-in-tooltips/"
  },
  {
    country: "Australia",
    litres: 139.9,
    url:"amcharts.com/docs/v4/tutorials/clickable-links-in-tooltips/"
  },
  {
    country: "Japan",
    litres: 128.3,
    url:"amcharts.com/docs/v4/tutorials/clickable-links-in-tooltips/"
  }
];


chart.innerRadius = am4core.percent(40);
chart.depth = 120;

chart.legend = new am4charts.Legend();

var series = chart.series.push(new am4charts.PieSeries3D());
series.dataFields.value = "litres";
series.dataFields.depthValue = "litres";
series.dataFields.category = "country";
series.slices.template.cornerRadius = 5;
series.colors.step = 3;
series.urlField= "url";
series.urlTarge= "_blank"

}); // end am4core.ready()

Вот часть HTML:

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

И CSS

<style>
#chartdiv {
  width: 100%;
  height: 500px;
}

</style>

person raw_hitt    schedule 20.08.2019    source источник


Ответы (2)


Вам нужно использовать привязку свойства и привязать Slice ="https://www.amcharts.com/docs/v4/reference/slice/#url_property" rel="nofollow noreferrer">url свойство с ключом "url" в ваших данных, например.

series.slices.template.propertyFields.url = "url";
series.slices.template.urlTarget = "_blank";

Демо:

https://codepen.io/team/amcharts/pen/6709f9e96d952ee15adfce67dde2ae8f

Если в данных присутствует "url", курсор мыши среза изменится на указатель при наведении, и щелчок по нему приведет вас к ссылке в новом окне.

person notacouch    schedule 28.08.2019

series.slices.template.events.on("hit", function(ev) {


   var url=ev.target.dataItem.dataContext.url
  console.log('currentTargt',url)

  window.location=url

});
series.targetUrl="_blank";

Вышеупомянутая вещь также работала для меня.

person raw_hitt    schedule 29.08.2019