Hiển thị chú giải công cụ cho chuỗi vô hình trong Highcharts

Question

Tôi đang cố gắng hiển thị chú giải công cụ tùy chỉnh bằng Highcharts. Bạn có thể tìm thấy ví dụ về mã tại đây: http://jsfiddle.net/jalbertbowdenii/fDNh9/188/

Khi bạn di chuột qua biểu đồ, bạn có thể thấy chú giải công cụ chỉ chứa giá trị từ Series 2, chứ không phải từ Series 1 (ẩn). Khi bạn nhấp vào "Series 1" trong chú giải, bạn có thể thấy các giá trị từ Series 1 trong chú giải công cụ.

CHỈNH SỬA: không code để cam kết, chỉ cần sửa liên kết/tôn trọng quy tắc chỉnh sửa ...
Có cách nào để hiển thị giá trị từ chuỗi vô hình trong chú giải công cụ không?

Answer 1

tooltip: { 
    formatter: function() { 
     var s = '<b>'+ this.x +'</b>'; 
     var chart = this.points[0].series.chart; //get the chart object 
     var categories = chart.xAxis[0].categories; //get the categories array 
     var index = 0; 
     while(this.x !== categories[index]){index++;} //compute the index of corr y value in each data arrays   
     $.each(chart.series, function(i, series) { //loop through series array 
      s += '<br/>'+ series.name +': ' + 
       series.data[index].y +'m';  //use index to get the y value 
     });   
     return s; 
    }, 
    shared: true 
} 

Answer 2

Trình định dạng tooltip là một chức năng giống như bất kỳ chức năng nào khác vì vậy nếu bạn chỉ làm cho dữ liệu có sẵn, nó có thể trả về một chuỗi có giá trị cho tất cả các chuỗi. Trong example này tôi đã di chuyển các mảng và danh mục chuỗi để phân tách các biến và trình định dạng tooltip sử dụng một chỉ mục trong các mảng này để tìm các giá trị.

formatter: function() { 
    var index = $.inArray(this.x, categories); 
    var s = '<b>'+ this.x +'</b>'; 

    s += '<br/>'+ chart.series[0].name + ': ' + data1[index]; 
    s += '<br/>'+ chart.series[1].name + ': ' + data2[index]; 

    return s; 
} 

Answer 3

Một cách khác để đi về việc này là để làm cho thuộc tính nhất định của bộ truyện vô hình, chứ không phải là toàn bộ loạt chính nó. Điều này sẽ cho phép bạn nhìn thấy nó trong chú giải công cụ và chú giải.

Dưới đây là những gì tôi đã làm: "minh bạch"

1. Trước tiên, tôi đặt màu dòng series vô hình
2. Tiếp theo, tôi đặt màu tô cho các điểm đánh dấu chuỗi vô hình thành "trong suốt".
3. Cuối cùng, tôi đã tắt trạng thái di chuột cho các điểm đánh dấu. Điều này ngăn cản các vòng tròn đánh dấu bóng mờ xuất hiện khi bạn di chuyển con trỏ chuột qua từng điểm trong chuỗi hiển thị.

Dưới đây là một phiên bản sửa đổi của fiddle ban đầu của bạn với những thay đổi này: http://jsfiddle.net/brightmatrix/fDNh9/184/

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], 
    lineColor: 'transparent',  // make the line invisible 
    marker: { 
     fillColor: 'transparent', // make the line markers invisible 
     states: { 
      hover: { 
       enabled: false  // prevent the highlight circle on hover 
      } 
     } 
    } 
}, { 
    data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5] 
}] 

Hai mặt hàng cần lưu ý:

1. Tôi đã sử dụng các thuộc tính enableMouseTracking: false với hàng loạt vô hình khác để ngăn chặn người dùng tương tác với họ (để đạt được hiệu ứng hình ảnh). Nếu bạn đặt cài đặt này cho chuỗi vô hình của mình, nó sẽ ngăn dữ liệu chuỗi xuất hiện trong chú giải công cụ của bạn.
2. Nếu bạn muốn giữ chuỗi invisbile xuất hiện trong chú giải, bạn có thể thêm thuộc tính showInLegend: false. Dữ liệu của nó sẽ vẫn hiển thị trong chú giải công cụ.

Tôi hy vọng điều này sẽ giúp những người khác gặp phải câu hỏi này.

Answer 4

Quá muộn để trả lời nhưng đây là những gì tôi đã làm. Vẽ biểu đồ và làm cho màu trong suốt. Vẽ nó trên trục y đối diện và đặt tối đa là 0. Đặt alignTicks thành false. Một cái gì đó như thế này.

chart: { 
     alignTicks: false, 
     type: 'line' 
    }, 

Sau đó, điều duy nhất cần thiết là thay đổi giá trị màu trong định dạng tooltip vì nhãn sẽ trong suốt.

Hy vọng điều này sẽ giúp ai đó.

Học tập vui vẻ :)