AmCharts V4：可点击的类别轴标签（堆积柱形图）答案

【问题标题】：AmChart V4 : Clickable category axes labels (Stacked columns chart)AmCharts V4：可点击的类别轴标签（堆积柱形图）
【发布时间】：2019-05-21 09:59:28
【问题描述】：

我使用 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 property 之类的东西，但这些似乎都不起作用。

【问题讨论】：

我意识到我的变量名称令人困惑，categoryAxis 上的 twig 循环实际上是图表数据上的一个循环，每个 categoryAxis 都是 chart.data 中的对象。
我明白了。看起来你应该循环 categoryAxis.renderer.labels 吗？此时您只是为同一标签覆盖事件hit 多次？
确实，categoryAxis.renderer.labels 有一个 values 属性，其中包含包含我要定位的标签的对象。但是，即使使用这种技术，我也无法得到我想要的，而且我添加的属性似乎对图表没有任何影响......

标签： javascript twig amcharts amcharts4

【解决方案1】：

如果您的数据中有 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;
})

【讨论】：