处理条形图中的点击事件

Question

每当我在浮动图表的条形图中悬停一个点时，它就会“发光”。 如何处理该点上的单击事件以链接到 php 页面？或如何向我的条形图添加链接

谢谢:-)

这是我的代码

     <script src="../../js/jquery-2.1.1.min.js"></script>
     <script src="../../js/jquery-ui.min.js" charset="utf-8"></script>
     <script src="../../js/autoNumeric.min.js" charset="utf-8"></script>
     <script src="../../js/jquery.flot.js" charset="utf-8"></script>
     <script src="../../js/jquery.flot.pie.js" charset="utf-8"></script>
     <script src="../../js/jquery.flot.resize.min.js"charset="utf-8"></script>
     <script src="../../js/jquery.flot.fillbelow.min.js"charset="utf-8"></script>
     <script src="../../js/jquery.flot.axislabels.min.js"charset="utf-8"></script>
     <script src="../../js/jquery.flot.symbol.js"charset="utf-8"></script>
     <script src="../../js/bootstrap.min.js"></script>
     <script type="text/javascript">



        var data = [
        [0, <?php echo $usa; ?>], 
        [1, <?php echo $china; ?>],
        [2, <?php echo $uk; ?>], 
        [3, <?php echo  $france; ?>],
        [4, <?php echo  $germany; ?> ]

        ];


         var dataset = [
         { label: "Fall By Location", data: data, color: "#5482FF" }
          ];

         var ticks = [
         [0, "Bathroom"], [1, "Bedside"], [2, "Kitchen"], [3, "Ward"],
         [4, "Hallway"]];


         var options = {
         series: {
         bars: {
            show: true
            }
         },
         bars: {
        align: "center",
        barWidth: 0.5
            },
      xaxis: {
    axisLabel: "Location",
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelFontFamily: 'Verdana, Arial',
    axisLabelPadding: 10,
    ticks: ticks

   },
   yaxis: {
    axisLabel: "Number of Falls",
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelFontFamily: 'Verdana, Arial',
    axisLabelPadding: 3,
    tickFormatter: function (v, axis) {
        return v + "R";
    }
   },
    legend: {
    noColumns: 0,
    labelBoxBorderColor: "#000000",
    position: "nw"
   },
    grid: {
    hoverable: true,
    borderWidth: 2,        
    backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
    }
     };

      $(document).ready(function () {
       $.plot($("#flot-placeholder"), dataset, options);    
        $("#flot-placeholder").UseTooltip();
      });




    function gd(year, month, day) {
      return new Date(year, month, day).getTime();
       }

      var previousPoint = null, previousLabel = null;

     $.fn.UseTooltip = function () {
     $(this).bind("plothover", function (event, pos, item) {
    if (item) {
        if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
            previousPoint = item.dataIndex;
            previousLabel = item.series.label;
            $("#tooltip").remove();

            var x = item.datapoint[0];
            var y = item.datapoint[1];

            var color = item.series.color;

            //console.log(item.series.xaxis.ticks[x].label);                

            showTooltip(item.pageX,
                    item.pageY,
                    color,
                    "<strong>" + item.series.label + "</strong><br>" +               
     item.series.xaxis.ticks[x].label + " : <strong>" + y + "</strong> R");                
        }
    } else {
        $("#tooltip").remove();
        previousPoint = null;
    }
     });
    };

     function showTooltip(x, y, color, contents) {
     $('<div id="tooltip">' + contents + '</div>').css({
    position: 'absolute',
    display: 'none',
    top: y - 40,
    left: x - 120,
    border: '2px solid ' + color,
    padding: '3px',
    'font-size': '9px',
    'border-radius': '5px',
    'background-color': '#fff',
    'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
    opacity: 0.9
    }).appendTo("body").fadeIn(200);
    }

Answer 1

试试下面显示的代码，FIDDLE DEMO

var links = ['link1', 'link2', 'link3'];

var options = {grid: { clickable: true, hoverable: true } };

$.plot($("#placeholder"),data,options);})

$("#placeholder").bind("plotclick", function (event, pos, item) {
        if (item) { 
            //window.location = links[item.dataIndex];
            window.open(links[dataIndex, '_blank');
            console.log(item);
           // here you can write location = "http://your-doamin.com";
        }
    });