AmChart V4: интерактивные метки осей категорий (диаграмма столбцов с накоплением) - PullRequest
Новая
       5

AmChart V4: интерактивные метки осей категорий (диаграмма столбцов с накоплением)

2 голосов
/ 21 мая 2019

Я использовал amchart 4 для создания XYChart , точнее диаграммы с накопленными столбцами, и я хотел бы сделать ярлыки столбцов кликабельными.Вот что я сделал (с небольшой веточкой): 

var chart = am4core.create("chartdiv", am4charts.XYChart);

chart.data = [
    {
        'CategoryAxis' : 'Column label 1',
        {% for valueAxis in listValueAxes %}
            '{{ valueAxis.name }}': {{ valueAxis.numericalValue }},
        {% endfor %}
    },{
        'CategoryAxis' : 'Column label 2',
        {% for valueAxis in listValueAxes %}
            '{{ valueAxis.name }}': {{ valueAxis.numericalValue }},
        {% endfor %}
    }
];

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "CategoryAxis";

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.labels.template.disabled = true;

var label = categoryAxis.renderer.labels.template;

function createSeries(field) {
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = field;
    series.dataFields.categoryX = "CategoryAxis";
    series.stacked = true;

    return series;
}

{% for valueAxis in listValueAxes %}
    series = createSeries('{{ valueAxis.name }}');
    // Clickable cells
    series.columns.template.url = "{{path('viewValueAxis', {'id':valueAxis.id})}}";
{% endfor %}

Последняя строка со свойством url позволяет нажимать на «ячейки» столбцов и перенаправлять на страницу, посвященнуюк значению, которое представлено.Я бы тоже хотел, чтобы метка колонок была кликабельной.Я пытался сделать что-то вроде этого: 

{% for categoryAxis in listCategoryAxes %}
    label.events.on("hit", function(){
        window.location.href = "{{path('viewCategoryAxis', {'id':categoryAxis.id})}}";
        }, this);
{% endfor %}

Проблема в том, что надписи не обрабатываются независимо и перенаправляются на одну и ту же страницу.Я хотел бы использовать свойство url, но там, где цель клика находится на ярлыке, а не на самом столбце.Я бы использовал что-то вроде series.columns.template.labels.url или, может быть, urlTarget свойство , но, похоже, ничего из этого не работает.

1 Ответ

2 голосов
/ 22 мая 2019

Если у вас есть URL в ваших данных, то самый простой способ сделать то, что вам нужно, это установить: 

categoryAxis.renderer.labels.template.propertyFields.url = "url"

То же самое с событием попадания: 

categoryAxis.renderer.labels.template.events.on("hit", function(event){
     window.location.href = event.target.dataItem.dataContext.url;
})
...