highcharts: dừng biểu đồ từ bẫy sự kiện chuột hoặc nhấp chuột vào biểu đồ ENTIRE

Question

Tất cả,

Tôi đang sử dụng HighCharts trong ứng dụng web mà tôi đang làm việc và nói chung, tôi rất thích nó.

Tuy nhiên, tôi đang gặp khó khăn trong việc tìm hiểu cách nhấp chuột vào biểu đồ TOÀN BỘ.

Nói cách khác - tôi muốn biết khi nào người dùng nhấp vào BẤT KW NƠI trên biểu đồ (ví dụ: khu vực ô, tiêu đề, trục x hoặc trục y, lề và phần đệm xung quanh thành phần biểu đồ, v.v. .)

Hoặc, tôi muốn tắt hoàn toàn các sự kiện, vì vậy tôi có thể bẫy sự kiện trong chính vùng chứa.

Phiên bản chi tiết khác ...

Tôi có DIV chứa HighChart.

Tôi muốn biết liệu người dùng có nhấp vào ANYWHERE trong DIV đó.

Vì vậy, ban đầu tôi đã thử đính kèm một sự kiện "onclick" vào DIV, nhưng điều đó không bao giờ bị sa thải, có lẽ do nhấp chuột đang bị bẫy bởi HighChart.

Vì vậy, trong đoạn code đó thiết lập các HighChart, tôi đã thêm này:

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: "container", 
     events: { 
      click: function(event) { 
       // do something 
      } 
     }, 
     ... 
    } 
    ... 
}); 

này hoạt động OK NẾU người dùng nhấp chuột đâu đó trong khu vực cốt truyện, nhưng không nếu đó nhấn bất cứ nơi nào khác trong biểu đồ (ví dụ: trục x, trục y, tiêu đề, phần đệm xung quanh các yếu tố biểu đồ, v.v.)

Vậy làm cách nào để tôi có thể làm cho biểu đồ ENTIRE?

Rất cám ơn trước!

Answer 1

Tôi gặp vấn đề tương tự.

Sử dụng trình kiểm tra webkit Tôi có thể thấy Highcharts liên kết sự kiện nhấp vào vùng chứa biểu đồ (div với lớp 'highcharts-container') và điều này dường như ảnh hưởng đến việc nhấp chuột.

Miễn là bạn không muốn bất kỳ chức năng trong đó sự kiện nhấp chuột, bạn có thể loại bỏ nó bằng cách thiết lập

chart.container.onclick = null;

Nếu không, bạn sẽ cần phải sử dụng được xây dựng trong tính highcharts sự kiện đặt callbacks của bạn. Như OP đã lưu ý, có một thuộc tính 'sự kiện' cho đối tượng biểu đồ, sẽ kích hoạt khi nhấp vào nền ô. Ngoài ra còn có một thuộc tính sự kiện cho các tùy chọn cốt truyện kích hoạt khi nhấp vào chuỗi chính nó.

Ví dụ, đối với lô diện tích:

var chart = new Highcharts.Chart({ 
    ... 
    plotOptions: { 
     area: { 
      events: { 
       click: function(event) { 
        // do something 
       } 
      }, 
     ... 
     } 
    } 
    ... 
}); 

Thông tin thêm hơn xem: http://www.highcharts.com/ref/#plotOptions-area-events

Answer 2

Tôi chạy vào điều này, và đã viết một phần mở rộng/plugin cho highcharts 3 rằng bong bóng nhấp sự kiện ra khỏi highcharts :

/*global Highcharts*/ 
(function (Highcharts) { 
    "use strict"; 

    Highcharts.wrap(Highcharts.Pointer.prototype, 'onContainerClick', function (original, e) { 
     var pointer = this, 
      parent = pointer.chart.container.parentNode, 
      bubbleUp = true; 

     // Add a method to the event to allow event handlers to prevent propagation if desired 
     e.swallowByHighCharts = function() { bubbleUp = false; }; 

     // Call the original event 
     original.apply(this, Array.prototype.slice.call(arguments, 1)); 

     // Trigger the event on the container's parent (to bubble the event out of highcharts) 
     // unless the user wanted to stop it 
     if (bubbleUp && typeof parent !== 'undefined' && parent) { 
      jQuery(pointer.chart.container.parentNode).trigger(e); 
     } 
    }); 

}(Highcharts)); 

Với sự kiện được thêm vào này, tất cả các sự kiện nhấp chuột đều bị bong ra khỏi thùng chứa highcharts. Kích hoạt nó trên container chính nó gây ra một tấn looping do cách highcharts và jquery tương tác với sự kiện bắn, và ít nhất trong trường hợp của tôi, tôi đã không thực sự có bất kỳ xử lý trên các yếu tố được sử dụng như là một mục tiêu render anyway.

Các bit thêm về swallowByHighCharts cho phép vô hiệu hóa hành vi mới nếu cần thiết - tức là,

config = { 
    chart: { ... } 
    plotOptions: { 
     series: { 
      point: { 
       events: { 
        click: function(e) { 
         // Don't pass along clicks on series points for one reason or another 
         e.swallowByHighCharts(); 
        } 
       } 
      } 
     } 
    } 
} 

Answer 3

Một câu trả lời rất muộn, nhưng vẫn cần thiết, theo ý kiến ​​của tôi.

Các highcharts tài liệu http://api.highcharts.com/highcharts#chart.events.click

đề cập đến một kịch bản mà chỉ đơn giản chuyển tiếp một sự kiện vào container của biểu đồ: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/events-container/

$(function() { 
    $('#chart1').highcharts({ 
     ... 
    }); 


    $('.chart-container').bind('mousedown', function() { 
     $(this).toggleClass('modal'); 
     $('.chart', this).highcharts().reflow(); 
    }); 
});