JS：如何在使用圖表時添加和捕獲點擊事件

Question

我有一個JS腳本繪製圖表。我需要add a click event。

由於圖表有一個onHover事件，我認爲這不是什麼大事，但我無法弄清楚;

template detail on theme forrest

上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);});