Biểu đồ Google HTML từ phải sang trái

Tôi gặp lỗi lạ khi sử dụng Biểu đồ của Google với thẻ dir = "rtl" trong html cho các trang web từ phải sang trái.Biểu đồ Google HTML từ phải sang trái

Điều gì xảy ra là trang nhận được dung lượng lớn và cuộn trái không có lý do gì. Xảy ra trên Chrome và Safari của tôi.

<html lang="ar" dir="rtl">

Đây là cách dễ nhất để tạo lại lỗi trên jsfiddle https://jsfiddle.net/t4ve0kkf/

google.load('visualization', '1', {packages: ['corechart', 'bar']}); 
 
google.setOnLoadCallback(drawBasic); 
 

 
function drawBasic() { 
 

 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('timeofday', 'Time of Day'); 
 
    data.addColumn('number', 'Motivation Level'); 
 

 
    data.addRows([ 
 
    [{v: [8, 0, 0], f: '8 am'}, 1], 
 
    [{v: [9, 0, 0], f: '9 am'}, 2], 
 
    [{v: [10, 0, 0], f:'10 am'}, 3], 
 
    [{v: [11, 0, 0], f: '11 am'}, 4], 
 
    [{v: [12, 0, 0], f: '12 pm'}, 5], 
 
    [{v: [13, 0, 0], f: '1 pm'}, 6], 
 
    [{v: [14, 0, 0], f: '2 pm'}, 7], 
 
    [{v: [15, 0, 0], f: '3 pm'}, 8], 
 
    [{v: [16, 0, 0], f: '4 pm'}, 9], 
 
    [{v: [17, 0, 0], f: '5 pm'}, 10], 
 
    ]); 
 

 
    var options = { 
 
    title: 'Motivation Level Throughout the Day', 
 
    hAxis: { 
 
    title: 'Time of Day', 
 
    format: 'h:mm a', 
 
    viewWindow: { 
 
    min: [7, 30, 0], 
 
       max: [17, 30, 0] 
 
       } 
 
       }, 
 
       vAxis: { 
 
       title: 'Rating (scale of 1-10)' 
 
       } 
 
       }; 
 

 
       var chart = new google.visualization.ColumnChart(
 
       document.getElementById('chart_div')); 
 

 
    chart.draw(data, options); 
 
}

<html lang="ar" dir="rtl"> 
 

 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
    <div id="chart_div"></div> 
 
</html>

Tôi cũng đã thử thêm lang và dir để div bảng xếp hạng trong khi vẫn giữ rtl trong html chính nhưng không hoạt động

<div id="chart_div" lang="en" dir="ltr"> </div>

Nguồn

2015-07-26 Ether

Hãy thử thiết lập như thế này:

–

@VimalanJayaGanesh OP muốn có nó trong thư mục gốc vì trang rõ ràng là một ngôn ngữ rtl (tiếng Ả Rập) –

@ RokoC.Buljan là chính xác, trang là một trang rtl tiếng Ả Rập và chỉ cần thêm Biểu đồ Google vào đó. – Ether

Kiểm tra HTML rendered với thanh tra viên trang có vẻ như phần này của HTML gây vấn đề:

<div aria-label="Данные диаграммы в виде таблицы." style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">/* ... */</div>

Vì vậy, về cơ bản "ẩn" yếu tố ARIA với left: -10000px không tương thích với các tài liệu rtl, vì rõ ràng nó sẽ để thêm video này khoảng cách lớn do tiêu cực trái.

Một cách để sửa chữa nó là để lực lượng này aria-lable để render với left: auto và di chuyển nó đến nay lên trên thay vì:

html[dir="rtl"] svg + [aria-label] { 
    top: -1000px !important; 
    left: auto !important; 
}

Demo:https://jsfiddle.net/57oe0ktz/

Nguồn

2015-07-26 07:37:33 dfsq

Bạn thật tuyệt vời. Cảm ơn điều này đã làm việc hoàn hảo. Không chắc chắn về bất kỳ tác dụng phụ nào được nêu ra nhưng cho đến nay trông rõ ràng như một bầu trời xanh. Tôi không chắc làm thế nào bạn tìm thấy nguyên nhân nhãn aria Tôi nhìn xung quanh với các công cụ dev Chrome và không tìm thấy nó. – Ether

Tôi cho rằng không nên có tác dụng phụ. Sẽ có nếu bạn che giấu aria-lebel này bằng 'display: none', thì nó cũng sẽ sửa khoảng trống, nhưng sau đó trình đọc màn hình sẽ không tìm thấy nội dung trợ năng. Di chuyển nó đến đầu tiêu cực không khác với trái: -100000. – dfsq

cảm ơn rất nhiều :) điều này đã giúp tôi sau một ngày dài gỡ lỗi –

Biểu đồ Google HTML từ phải sang trái

Trả lời

Các vấn đề liên quan