Ẩn _groups_ của chuỗi trong Highcharts và jQuery: cách nhận hiệu suất có thể chấp nhận?

Question

Tôi đang sử dụng Highcharts để đại diện cho các nhóm chuỗi thời gian. Vì vậy, các điểm dữ liệu được thu thập từ cùng một cá nhân được kết nối bởi các đường và các điểm dữ liệu từ các cá nhân thuộc cùng một nhóm chia sẻ cùng một màu. Truyền thuyết Highcharts hiển thị từng chuỗi thời gian riêng lẻ thay vì nhóm, và tôi có hàng trăm chuỗi thời gian, để nó xấu xí và không thực tế để ẩn và hiển thị dữ liệu theo cách đó. Thay vào đó, tôi đã tạo các nút và sử dụng jQuery để liên kết chúng với các chức năng sẽ tìm kiếm các màu phù hợp trong chuỗi thời gian và chuyển đổi chế độ hiển thị của từng chuỗi phù hợp.

Dưới đây là một ví dụ với một tập dữ liệu nhỏ: http://jsfiddle.net/bokov/VYkmg/6/

Dưới đây là chức năng hàng loạt-núp ví dụ:

$("#button").click(function() { 
    if ($(this).hasClass("hideseries")) { 
     hs = true; 
    } else { 
     hs = false; 
    } 
    $(chart.series).each(function(idx, item) { 
     if (item.color == 'green') { 
      if (hs) { 
       item.show(); 
      } else { 
       item.hide(); 
      } 
     } 
    }); 
    $(this).toggleClass("hideseries"); 
}); 

Các công trình trên. Vấn đề là, dữ liệu thực của tôi có thể có hơn một trăm chuỗi thời gian riêng lẻ và có vẻ như kiểm tra màu của mỗi chuỗi là rất chậm. Vì vậy, ai cũng có thể đề xuất một cách hiệu quả hơn để giải quyết vấn đề này? Có một số phương pháp Highcharts cài sẵn đã làm điều này không? Hoặc, tôi có thể cung cấp cho jQuery một bộ chọn cụ thể hơn không?

Tôi đã cố gắng đào vào phần tử <svg> được tạo bởi Highcharts nhưng tôi không thể tìm ra phần tử con nào tương ứng với chuỗi trong biểu đồ.

Cảm ơn.

Answer 1

Vấn đề ở đây là Highcharts đang vẽ lại biểu đồ sau mỗi lần thay đổi. Tôi đã kiểm tra API để xem liệu có thông số nào bạn có thể vượt qua để trì hoãn điều đó hay không, nhưng điều đó dường như không đúng.

Thay vào đó, bạn có thể còn sơ khai ra phương pháp vẽ lại cho đến khi bạn đã sẵn sàng, như vậy:

var _redraw = chart.redraw; 
chart.redraw = function(){}; 

//do work 

chart.redraw = _redraw; 
chart.redraw(); 

Check-out đầy đủ ví dụ here. Đối với tôi, nó nhanh hơn khoảng 10 lần để làm theo cách này.

Answer 2

Thay vì gọi show() hoặc hide() cho mỗi chuỗi, hãy gọi setVisible(/* TRUE OR FALSE HERE */, false);. Tham số thứ hai này là tham số redraw và bạn có thể tránh tạo lại quá trình vẽ (chậm) cho mỗi chuỗi.

Sau đó, sau khi bạn thay đổi hoàn toàn độ nhớt, hãy gọi chart.redraw()sau khi.

http://api.highcharts.com/highcharts#Series.setVisible