बॉडी हाईचार्ट लाइब्रेरी

Question

के साथ समस्या पर क्लिक करें मैंने एक पॉपअप बनाया है जो मैं शरीर पर क्लिक करता हूं। लेकिन हाइटचार्ट में बॉडी क्लिक काम नहीं कर रहा है।

Hightchart लाइब्रेरी: http://code.highcharts.com/highcharts.js

मेरे jQuery कोड है: समाधान के लिए पहले से

$(function() { 
    var chart; 
    $(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'line', 
      marginRight: 130, 
      marginBottom: 25 
     }, 
     title: { 
      text: 'Monthly Average Temperature', 
      x: -20 //center 
     }, 
     subtitle: { 
      text: 'Source: WorldClimate.com', 
      x: -20 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 
     yAxis: { 
      title: { 
       text: 'Temperature (°C)' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     tooltip: { 
      formatter: function() { 
        return '<b>'+ this.series.name +'</b><br/>'+ 
        this.x +': '+ this.y +'°C'; 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -10, 
      y: 100, 
      borderWidth: 0 
     }, 
     series: [{ 
      name: 'Tokyo', 
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
     }, { 
      name: 'New York', 
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
     }, { 
      name: 'Berlin', 
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] 
     }, { 
      name: 'London', 
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 
     }] 
    }); 
    }); 

    $("body").click(function(){ 
     $(".popupBox").hide(); 
    }); 
    $(".popup").click(function(e){ 
    e.stopPropagation(); 
    $(".popupBox").toggle();  
    }); 
});​ 

demo

धन्यवाद

Answer 1

आप 'कंटेनर' div की स्थिति पर क्लिक करें क्योंकि 'कंटेनर' के सभी चाइल्ड तत्व डोम पेड़ खलबली मचाने वाले क्लिक करें घटना को रोकने div फोन नहीं कर सकते हैं।

तो आपको क्लिक के बजाय mousedown ईवेंट को कॉल करना होगा।

$(function() { 
    var chart; 
    $(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'line', 
      marginRight: 130, 
      marginBottom: 25 
     }, 
     title: { 
      text: 'Monthly Average Temperature', 
      x: -20 //center 
     }, 
     subtitle: { 
      text: 'Source: WorldClimate.com', 
      x: -20 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 
     yAxis: { 
      title: { 
       text: 'Temperature (°C)' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080'}] 
     }, 
     tooltip: { 
      formatter: function() { 
       return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + '°C'; 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -10, 
      y: 100, 
      borderWidth: 0 
     }, 
     series: [{ 
      name: 'Tokyo', 
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]}, 
     { 
      name: 'New York', 
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]}, 
     { 
      name: 'Berlin', 
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]}, 
     { 
      name: 'London', 
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]}] 
    }); 
    }); 
    $("html").click(function() { 
     $(".popupBox").hide(); 
    }); 
    $(".popup").click(function(e) { 
     e.stopPropagation(); 
     $(".popupBox").toggle(); 
    }); 
    $("#container").mousedown(function(e) { 
     $(".popupBox").hide(); 
    }); 
});​ 

Demo

Answer 2

इसकी नहीं स्क्रिप्ट refrence के बारे में। इसके बारे में चार्ट क्लिक घटना के बारे में। मैंने चार्ट पर क्लिक ईवेंट जोड़ा और यह काम करता है।

chart: { 
      renderTo: 'container', 
      type: 'line', 
      marginRight: 130, 
      marginBottom: 25, 

      renderTo: 'container', 
      events: { 
       click: function(event) { 
        $(".popupBox").hide(); 
       } 

      }, 
     }, 

http://jsfiddle.net/3jLtE/18/

Answer 3

आप चार्ट कंटेनर

$("#container").mousedown(function(){ 
     $(".popupBox").hide();  
}); 

यह किसी भी mousebutton पर ट्रिगर किया जाएगा की mousedown घटना में इस संभाल कर सकते हैं, आप बटन की जाँच करें और संभाल के रूप में आप का उपयोग कर सकते हैं इच्छा which घटना की संपत्ति ऑब्जेक्ट हैंडलर

$("#container").mousedown(function(e){ 
     if(e.which==1){ // Only on left click 
     $(".popupBox").hide();  
     } 
}); 

पर 10

Handling chart container click event | Highchart & Highstock
Updated demo