Thêm chú giải công cụ vào chú thích ở cột cao khi di chuột

Question

Id muốn cho người dùng biết rằng anh ấy có thể xóa các mục khỏi chú giải bằng cách chỉ cần nhấp vào chúng. Đối với một số người, điều này có thể trực quan nhưng những người khác có thể không biết rằng họ có thể làm điều đó. Tôi muốn cho người dùng biết khi họ qua mục chú giải mà sau đó có thể nhấp để xóa nó.

Tôi đang sử dụng lớp trình bao bọc GWT cho highcharts.

Cảm ơn bạn.

Answer 1

Highcharts không có chú giải công cụ tích hợp cho chú giải mục, nhưng bạn vẫn có thể tạo chú giải công cụ của riêng bạn cho điều đó. Thật đơn giản để thêm các sự kiện tùy chỉnh vào legendItem (ví dụ mouseover và mouseout) và hiển thị chú giải công cụ đó.

Xem ví dụ làm thế nào để thêm sự kiện vào các yếu tố trong Highcharts: http://jsfiddle.net/rAsRP/129/

 events: { 
      load: function() { 
       var chart = this, 
        legend = chart.legend; 

       for (var i = 0, len = legend.allItems.length; i < len; i++) { 
        (function(i) { 
         var item = legend.allItems[i].legendItem; 
         item.on('mouseover', function (e) { 
          //show custom tooltip here 
          console.log("mouseover" + i); 
         }).on('mouseout', function (e) { 
          //hide tooltip 
          console.log("mouseout" + i); 
         }); 
        })(i); 
       } 

      } 
     } 

Answer 2

Có một cơ hội để có được tooltips tại lơ lửng trên truyền thuyết Highcharts. Bạn chỉ cần bật tính năng sử dụngHTML cho chú giải và xác định lại chức năng labelFormatter; hàm này sẽ trả về văn bản nhãn được đính kèm trong thẻ "span". Trong thẻ "span" này, người ta có thể bao gồm một lớp để áp dụng các chú giải công cụ dựa trên jQuery (jQuery UI hoặc Bootstrap chẳng hạn). Ngoài ra, có thể chuyển một số dữ liệu (ví dụ: chỉ mục của mục chú giải) bằng thuộc tính 'data-xxx':

labelFormatter: function() { 
    return '<span class="abc" data-index="' + this.index + '">' + this.name + '</span>'; 
} 

Chú giải công cụ có thể được định dạng theo ý muốn; siêu liên kết cũng có thể. The fiddle is here.

Answer 3

Bạn có thể làm điều đó.

Lúc đầu, Highcharts có chức năng gọi lại.
https://stackoverflow.com/a/16191017

Và phiên bản sửa đổi Tipsy có thể hiển thị chú giải công cụ trong SVG.
http://bl.ocks.org/ilyabo/1373263
* Sử dụng jquery.tipsy.js và tipsy.css trên trang này.

Sau đó, bắt đầu bản đồ cao như thế này.

$('#your-chart').highcharts(your_chart_options,function(chart){ 
    $('#your-chart').find('.highcharts-legend-item').each(function(){ 
     // set title text example 
     var _text = $(this).text(), 
      _title = ''; 
     switch(_text){ 
      case "legend 1": 
       _title = 'legend 1 title'; 
       break; 
      case "legend 2": 
       _title = 'legend 2 title'; 
       break; 
     } 
     // add <title> tag to legend item 
     $(this).append($('<title></title>').text(_title)); 
    }); 
    $('#your-chart').find(".highcharts-legend-item").tipsy({ 
     gravity: 's', 
     fade: true 
    }) 
});