Question

如何在amcharts的渠道栏上添加click事件。

am4core.ready(function () {
    debugger;

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

    var chart = am4core.create("chartdiv", am4charts.SlicedChart);
    chart.hiddenState.properties.opacity = 0; // this makes initial fade in effect

    chart.data = [{
        "id": 10,
        "name": "The first",
        "value": 600
    }, {
        "id": 11,
        "name": "The second",
        "value": 300
    }, {
        "id": 12,
        "name": "The third",
        "value": 200
    }, {
        "id": 13,
        "name": "The fourth",
        "value": 180
    }, {
        "id": 14,
        "name": "The fifth",
        "value": 50
    }, {
        "id": 15,
        "name": "The sixth",
        "value": 20
    }, {
        "id": 16,
        "name": "The seventh",
        "value": 10
    }];    
});

并希望执行点击事件

 $(document).ready(function () {
    $("#chartdiv").on("click", function () {
        $("#id-133").click(function () {
            console.log("clicked on ");
        });
    });
});

在这里，我正在按ID执行操作，这是错误的，因为ID动态更改。 amcharts中是否有任何点击事件？

Answer 1

通过

得到我的答案

 am4core.ready(function () {

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

    var chart = am4core.create("chartdiv", am4charts.SlicedChart);
    chart.hiddenState.properties.opacity = 0;

    var series = chart.series.push(new am4charts.FunnelSeries());
    series.colors.step = 2;
    series.dataFields.value = "value";
    series.dataFields.category = "name";
    series.dataFields.id = "id";
    series.alignLabels = true;
    series.orientation = "horizontal";
    series.bottomRatio = 1;

    series.data = [{
        "id": 10,
        "name": "The first",
        "value": 600
    }, {
        "id": 11,
        "name": "The second",
        "value": 300
    }, {
        "id": 12,
        "name": "The third",
        "value": 200
    }, {
        "id": 13,
        "name": "The fourth",
        "value": 180
    }, {
        "id": 14,
        "name": "The fifth",
        "value": 50
    }, {
        "id": 15,
        "name": "The sixth",
        "value": 20
    }, {
        "id": 16,
        "name": "The seventh",
        "value": 10
    }];

    chart.legend = new am4charts.Legend();
    chart.legend.position = "top";

    series.slices.template.events.on("hit", function (ev) {
        console.log(ev.target.dataItem.id);
        console.log(ev.target.dataItem._dataContext);
    });

});

如何在水平漏斗图中的条形上添加点击事件

1 个答案: