Highcharts - HTML tooltip & datalabels hiển thị vấn đề

Question

đây là vấn đề của tôi, khi bạn đặt useHTML: true cho datalabels, có vẻ như văn bản nhãn sẽ ghi đè lên nền tooltip.

Bạn có thể thấy các hành vi trong fiddle đơn giản này: bar chart

Cố gắng để hiển thị một tooltip trên chuột lên một quán bar, và bạn sẽ thấy nội dung của datalabel trong nền tooltip.

Có thể đặt chỉ mục z trên nhãn dữ liệu không?

tôi đã cố gắng để thêm video này trong định nghĩa tooltip nhưng không thành công:

style : { 
    color: 'black', 
    'z-index': 0 
    }, 

Tôi cũng đã cố gắng để thiết lập các lớp học khoảng cho các nhãn dữ liệu và chú giải công cụ, sau đó thêm một z-index vào css các thuộc tính cho các lớp này, nhưng nó vẫn không hoạt động.

Chỉnh sửa: Vì tôi vẫn đang tìm kiếm giải pháp cho vấn đề của mình, ai đó có thể chỉ cho tôi cách thêm lớp vào thanh (hoặc bảng dữ liệu) của biểu đồ? Mục đích của tôi là gọi một sự kiện onclick cụ thể trong lớp học này.

Answer 1

Ok, vì vậy đây là một cách giải quyết cho vấn đề của tôi ... Ý tưởng là để tạo tooltip tùy chỉnh của riêng bạn.

Các giải pháp đã được đưa ra trên diễn đàn Highcharts: Highcharts forum post

Để làm như vậy, thiết lập thuộc tính 'useHTML' trên cả datalabels và tooltips, loại bỏ một số giá trị mặc định thuộc tính của chú giải công cụ và thiết lập các lớp CSS trong các chức năng và định dạng :

//JS 
datalabels: { 
    ... 
    useHTML: true, 
    formatter: function() { 
     return ("<span class='datalabel'>" + this.y + "</span>"); 
    } 
} 

tooltip: { 
    ... 
    borderWidth:0, 
    borderRadius:0, 
    shadow:false, 
    useHTML: true, 
    formatter: function() { 
     return ("<div class='tooltip'>" + this.y + "</div>"); 
    } 
} 

bước cuối cùng (quan trọng nhất) là để thiết lập các quy tắc CSS cho span class highcharts-tooltip (được sử dụng bởi highcharts để render tooltips HTML).

//CSS 
.highcharts-tooltip span { 
    background-color:white; 
    z-index:9999!important; 
} 

Lưu ý thuộc tính z-index, thuộc tính sẽ cho phép chú giải công cụ hiển thị trên nhãn dữ liệu.

Bây giờ bạn chỉ có thể tùy chỉnh chú giải công cụ của mình bằng cách đặt quy tắc CSS cho lớp 'tooltip'.

Đối với một ví dụ sống đầy đủ, vui lòng xem jsfiddle đây: Custom tooltip

Lưu ý: Đây không phải là bắt buộc phải chỉ định lớp datalabel trong định dạng cho giải pháp này đến công trình, tôi chỉ cần để tôi có thể đăng ký một con chuột cụ thể sự kiện trên đó.

Answer 2

Kiểm tra http://api.highcharts.com/highcharts#tooltip.backgroundColor cho màu nền chú giải công cụ.

Cùng một vấn đề loại đã được giải quyết với khách sạn này tại highslide forum