Question

我正在使用Am-charts，我希望在点击每个图表时触发一个功能，并在警报中显示其值。我无法找到我点击的图表。请有人建议我点击它的价值。 See JSFiddle here

angular.module('amChartsDirectiveExample',['amChartsDirective']).controller('amChartsController', function ($scope) {
    $scope.amChartOptions = {
        data: [{
            year: 2005,
            income: 23.5,
            expenses: 18.1
        }, {
            year: 2006,
            income: 26.2,
            expenses: 22.8
        }, {
            year: 2007,
            income: 30.1,
            expenses: 23.9
        }, {
            year: 2008,
            income: 29.5,
            expenses: 25.1
        }, {
            year: 2009,
            income: 24.6,
            expenses: 25
        }],
        type: "serial",
        theme: 'black',
        categoryField: "year",
        rotate: true,
        pathToImages: 'https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/images/',
        legend: {
            enabled: true
        },
        chartScrollbar: {
            enabled: true,
        },
        categoryAxis: {
            gridPosition: "start",
            parseDates: false
        },
        valueAxes: [{
            position: "top",
            title: "Million USD"
        }],
        graphs: [{
            type: "column",
            title: "Income",
            valueField: "income",
            fillAlphas: 1,
        }]
    }

});

Answer 1

将以下侦听器添加到您的配置中：

listeners: [{
  event: "clickGraphItem",
  method: function(e) {

    console.log('Event object:', e);
    console.log('Clicked item:', e.item);
    console.log('Income:', e.item.dataContext.income);
  }
}]

请注意，如果您在事件监听器内部执行与Angular交互的操作（例如范围修改），则需要调用$scope.$apply()来手动触发摘要循环。

演示： http://jsfiddle.net/aggn062r/

使用angularjs的点击事件的图表

1 个答案: