Highcharts - fire legendItemNhấp vào sự kiện

Question

Tôi muốn kích hoạt sự kiện tương tự mà sự kiện được kích hoạt khi bạn chọn chú thích mục nhưng từ nút html bên ngoài. Có thể không?

Tôi đã tạo một jsfiddle để hiển thị: http://jsfiddle.net/YcJF8/1/.

$('#container').highcharts({ 
        chart : { 
         type : 'spline', 
        }, 

        xAxis : { 
         categories : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
        }, 

        series : [{ 
         data : [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 

        }], 

        plotOptions : { 
         series : { 

         cursor : 'pointer', 
        } 
       }, 
}); 

$('#button').click(function() { 
     alert("Fire legenditemclick event"); 
}); 

Trong jsfiddle này, tôi có một nút và tôi muốn rằng khi tôi bấm nút nó cháy một sự kiện hoặc một cái gì đó biểu đồ phát hiện và hành vi giống như huyền thoại mục (loạt 1) được nhấp.

Thank you very much

Answer 1

Chỉ cần sử dụng:

$($('.highcharts-legend-item')[0]).click() 

Trường hợp 0 là chỉ số của bộ truyện bạn muốn nghe tiếng 'click'.

Cập nhật fiddle.

CÁC CHỈNH SỬA

• highcharts-legend-item là lớp của mỗi mục trong truyền thuyết. Tôi phát hiện ra điều này bằng cách quan sát truyền thuyết bằng cách sử dụng các công cụ dành cho nhà phát triển chrome.
• $('.highcharts-legend-item') là bộ chọn jquery để trả về một mảng của tất cả các phần tử của lớp đó. Tôi chọn cái đầu tiên của chỉ số và $() nó để chuyển đổi nó thành một đối tượng jquery
• Các .click là thế này: http://api.jquery.com/click/

Answer 2

Tôi nghĩ câu trả lời với định nhấp chuột vào

$('.highcharts-legend-item')[0]) 

là không phải là tốt nhất. Nó rất "đắt" vì DOM có lẽ là nặng. Giải pháp của tôi thường dựa trên CSS. Bạn có thể đặt vị trí của các mục chú thích highchart ngay phía trên các phần tử tùy chỉnh mà bạn muốn sử dụng và mọi mục phải có chiều cao & chiều cao giống như phần tử HTML tùy chỉnh. Các phần tử Highchart phải có giá trị opacity 0 để chúng không hiển thị. Vì vậy, khi bạn nhấp vào phần tử của bạn, trên thực tế, bạn đang nhấp vào mục chú thích highchart. Nếu bạn muốn đặt một số CSS cho phần tử tùy chỉnh của mình, bạn nên xác định chú thích legendItemClick:

plotOptions: { 
    series: { 
     events: { 
      legendItemClick: function() { 
       var legenedItemIndex = this.index // index of highchart legend item 
       $("your html element:eq(" + legenedItemIndex + ")") //do something with your element 
      } 
     } 
    } 
}