Highcharts: Ẩn và hiển thị chú thích

Question

Tôi muốn có thể chuyển đổi chế độ hiển thị của chú thích biểu đồ khi người dùng nhấp vào nút.

Tôi đã cố gắng ẩn chú thích bằng cách sử dụng phương pháp destroy() không có giấy tờ, tuy nhiên khi tôi cố gắng hiển thị lại chú thích và mục đó, các mục xuất hiện ở phía trên bên trái của biểu đồ thay vì trong chú giải. Các mục cũng dường như không có bất kỳ trình xử lý sự kiện nào của chúng được đính kèm (nhấp vào một mục không còn chuyển đổi một chuỗi).

Có cách nào tốt hơn để thực hiện việc này không? Tôi phải hỗ trợ cả triển khai SVG và VML, vì vậy tôi đang tìm một giải pháp để giải quyết cả hai.

JSFiddle Example

$('#updateLegend').on('click', function (e) { 
    var enable = !chart.options.legend.enabled; 
    chart.options.legend.enabled = enable; 

    if (!enable) { 
     chart.legend.destroy(); //"hide" legend 
    } else { 
     var allItems = chart.legend.allItems; 

     //add legend items back to chart 
     for (var i = 0; i < allItems.length; i++) { 
      var item = allItems[i]; 
      item.legendItem.add(); 
      item.legendLine.add(); 
      item.legendSymbol.add(); 
     } 

     //re-render the legend 
     chart.legend.render(); 
    } 
}); 

Answer 1

Trong trường hợp khi bạn tiêu diệt truyền thuyết, sau đó bạn cần phải tạo ra huyền thoại đầy đủ. Giải pháp đơn giản là sử dụng hàm hide()/show() cho các phần tử.

http://jsfiddle.net/sbochan/3Bh7b/1/

$('#updateLegend').click(function (e) { 
     var legend = chart.legend; 

     if(legend.display) { 
      legend.group.hide(); 
      legend.box.hide(); 
      legend.display = false; 
     } else { 

      legend.group.show(); 
      legend.box.show(); 
      legend.display = true; 
     } 
    }); 

Answer 2

Dưới đây là một giải pháp thú vị tôi đã đưa ra - làm việc cho Highcharts3 và Highstocks1.3 https://bitbucket.org/jkowalleck/highcharts-legendextension

Tất cả bạn phải làm là để thêm HighchartsExtension Tôi đã viết thư cho HTML của bạn trang và bạn nhận được 3 hàm mới được thêm vào Biểu đồ:
myChart.legendHide(),
myChart.legendShow() và
myChart.legendToggle()

Xem các ví dụ:
trong Highcharts với huyền thoại nổi: http://jsfiddle.net/P2g6H/
trong Highstocks với huyền thoại tĩnh: http://jsfiddle.net/ps6Pd/

Answer 3

Một cách khá đơn giản để làm điều này là để lặp qua loạt và cập nhật chúng để không hiển thị trong truyền thuyết. Điều này cho phép bạn tạo hoạt động trong và ngoài hiển thị các huyền thoại và sử dụng toàn bộ không gian container, như các phương pháp được xây dựng trong

Ví dụ, việc chuyển mục huyền thoại sẽ trông như thế này:.

$('#toggleButton').click(function() { 
    for(i in chart.series) 
     chart.series[i].update({ showInLegend: chart.series[i].options.showInLegend == null ? false : !chart.series[i].options.showInLegend }, false); 
    chart.redraw(); 
}); 

Xem this JSFiddle demonstration để chuyển đổi, hiển thị và ẩn bằng cách sử dụng các nút.

Answer 4

Cập nhật mã một chút câu trả lời đã chọn. Bây giờ nó sẽ tăng không gian khi hiển thị/ẩn huyền thoại.

$('#updateLegend').click(function (e) { 
    var legend = chart.legend; 

    if(legend.display) { 
     legend.group.hide(); 
     legend.box.hide(); 
     legend.display = false; 
    } else { 

     legend.group.show(); 
     legend.box.show(); 
     legend.display = true; 
    } 

    var series = chart.series[0]; 
     $(chart.series).each(function(){ 
      this.setVisible(true, false); 
     }); 
     chart.redraw(); 

}); 

Answer 5

Cho đến nay chỉ có giải pháp làm việc trên thế giới:

for (i = 0; i < chart.series.length; i++) 
      chart.series[i].options.showInLegend = true; 
      chart.series[0].setData(chart.series[0].data); 

Rendering bằng tay không hoạt động (ẩn legend.box vv, luôn nếu có nhiều trang trong truyền thuyết, sau đó nút trình duyệt ở lại) . setData gọi trình kết xuất nội bộ hoạt động khá tốt và thực hiện tất cả những gì cần thiết.
Hmm, có lẽ cuối cùng thì bạn có thể làm điều này:
chart.setSize( chartWidth, chartHeight+chart.legend.fullHeight, false );

Answer 6

Đơn giản như

myChartObject.legend.update({ 
    enabled:true 
)};