Chú giải công cụ tạo kiểu biểu đồ API của Google

Question

Có cách nào để tạo kiểu Tooltips trong API biểu đồ của Google không? Tôi đã quản lý để chỉ thay đổi màu sắc của văn bản bằng cách sử dụng tooltip.textStyle. Vậy là có bất kỳ giải pháp để thay đổi trắng nền một số màu khác (như thể hiện trên hình ảnh):

thử nghiệm sân chơi http://jsfiddle.net/nyNAg/

Answer 1

Tôi tìm thấy một giải pháp thông qua khả năng cầu may:

<style> 
path { 
    fill: yellow; 
} 
</style> 

Dù sao, tôi đã không tìm thấy bất kỳ tùy chọn cấu hình cho nền trong các bảng xếp hạng API google.

Answer 2

Khi Google Công cụ Chart API thực hiện SVG của nó biểu đồ qua khung nội tuyến được lưu trữ trên máy chủ của nó, theo số Same Origin Policy bạn không thể truy cập hoặc sửa đổi nội dung của miền khác, trừ khi thông qua thao tác phía máy chủ trước khi gửi phản hồi của khách hàng.

Do đó, tôi không chắc chắn cách bạn quản lý để thay đổi màu văn bản - có thể là lỗi trình duyệt?

Answer 3

Có thể thay thế hoàn toàn nhãn bằng HTML tùy chỉnh. Nó có thể là một chút phức tạp, nhưng cung cấp cho bạn toàn quyền kiểm soát nội dung và phong cách. Xem https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content

Answer 4

Một tùy chọn khác có thể là ghi đè quy tắc kiểu nội tuyến, ví dụ:

li.google-visualization-tooltip-item span [style] {font-weight: normal! Important; }

http://css-tricks.com/override-inline-styles-with-css/

Answer 5

Enable tooltip để được xử lý bởi các HTML bằng cách viết mã này trong lựa chọn của bạn của bảng xếp hạng google Mã sản phẩm: tooltip: { isHtml: true } (,) thêm một dấu phẩy nếu cần thiết. :)

Bây giờ bạn có thể tạo chú giải công cụ bằng cách sử dụng HTML và css. :)

/CSS Styling/

Để tạo kiểu cho tooltip hộp:

div.google-visualization-tooltip {} 

Để tạo kiểu nội dung như cỡ chữ, màu sắc, vv

div.google-visualization-tooltip > ul > li > span {} 

Sử dụng bất cứ khi nào !important cần thiết;)

http://jsfiddle.net/nyNAg/66/