JS：如何在使用图表时添加和捕获单击事件

Question

我有一个绘制图表的JS脚本。

我需要add一个click event。

由于图表有一个onHover事件，我认为这不是什么大问题，但我无法弄明白;

template detail on theme forrest

on the live version我正在尝试捕获此类图表的点击事件：LINES CHART WITH FILL & WITHOUT POINTS

var charts = {
    // init charts on dashboard
    initIndex: function()
    {
        // init lines chart with fill & without points
        this.chart_lines_fill_nopoints.init();
    },
    // utility class
    utility:
            {
                chartColors: [themerPrimaryColor, "#444", "#777", "#999", "#DDD", "#EEE"],
                chartBackgroundColors: ["transparent", "transparent"],
                applyStyle: function(that)
                {
                    that.options.colors = charts.utility.chartColors;
                    that.options.grid.backgroundColor = {colors: charts.utility.chartBackgroundColors};
                    that.options.grid.borderColor = charts.utility.chartColors[0];
                    that.options.grid.color = charts.utility.chartColors[0];
                },
            },
    // lines chart with fill & without points
    chart_lines_fill_nopoints:
            {
                // chart data
                data:
                        {
                            d1: [],
                            d2: []
                        },
                // will hold the chart object
                plot: null,
                // chart options
                options:
                        {
                            grid: {
                                show: true,
                                aboveData: true,
                                color: "#3f3f3f",
                                labelMargin: 5,
                                axisMargin: 0,
                                borderWidth: 0,
                                borderColor: null,
                                minBorderMargin: 5,
                                clickable: true,
                                hoverable: true,
                                autoHighlight: true,
                                mouseActiveRadius: 20,
                                backgroundColor: {}
                            },
                            series: {
                                grow: {active: false},
                                lines: {
                                    show: true,
                                    fill: true,
                                    lineWidth: 2,
                                    steps: false
                                },
                                points: {show: false}
                            },
                            legend: {position: "nw", backgroundColor: null, backgroundOpacity: 0},
                            yaxis: {min: 0},
                            xaxis: {ticks: 11, tickDecimals: 0},
                            colors: [],
                            shadowSize: 1,
                            tooltip: true,
                            tooltipOpts: {
                                content: "%s : %y.0",
                                shifts: {
                                    x: -30,
                                    y: -50
                                },
                                defaultTheme: false
                            }
                        },
                // initialize
                init: function()
                {
                    $.ajax({
                        url: $('#url').html() + '/index.php/user/request/loadDashboardChartRequest',
                        data: {},
                        success: function(data) {
                            for (var i in data) {
                                var dataidx = false;
                                switch (i) {
                                    case 'delta1':
                                        dataidx = 'd1';
                                        break;
                                    case 'delta2':
                                        dataidx = 'd2';
                                        break;
                                }
                                if (dataidx) {
                                    for (var i2 in data[i]) {
                                        charts.chart_lines_fill_nopoints.data[dataidx].push([i2, data[i][i2]]);
                                    }
                                }
                            }
                            charts.utility.applyStyle(charts.chart_lines_fill_nopoints);
                            charts.chart_lines_fill_nopoints.plot = $.plot(
                                    '#chart_lines_fill_nopoints',
                                    [{
                                            label: "Delta 1 - page loading time",
                                            data: charts.chart_lines_fill_nopoints.data.d1,
                                            lines: {fillColor: "rgba(0,0,0,0.01)"},
                                            points: {fillColor: "#88bbc8"}
                                        },
                                        {
                                            label: "Delta 2 - page + external services loading time",
                                            data: charts.chart_lines_fill_nopoints.data.d2,
                                            lines: {fillColor: "rgba(0,0,0,0.1)"},
                                            points: {fillColor: "#ed7a53"}
                                        }],
                            charts.chart_lines_fill_nopoints.options);
                        },
                        dataType: 'json',
                    });
                }
            },
};

Answer 1

我找到了答案：

$('#chart_lines_fill_nopoints').bind('plotclick',function(event,pos,item){console.log(1);});