谷歌图表HTML从右到左的问题

Question

I'm getting a weird bug while using Google Charts with dir="rtl" tag in the html for right to left webpages. 从右到左网页的html中使用带有dir =“ rtl”标记的Google图表时，出现一个奇怪的错误。

What happens is the page gets a massive space and scrolls left for no reason. 发生的情况是页面获得了很大的空间，并且无故向左滚动。 Happens on my Chrome and Safari. 发生在我的Chrome和Safari上。

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

This is the easiest way to reproduce the bug on jsfiddle https://jsfiddle.net/t4ve0kkf/ 这是在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>

I've also tried adding lang and dir to the chart div while keeping the rtl tag in the main html but didn't work 我还尝试将lang和dir添加到图表div中，同时将rtl标签保留在主html中，但没有用

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

Answer 1

Checking rendered HTML with page inspectors it appears that this part of the HTML causes the issue: 使用页面检查器检查呈现的HTML，看来HTML的这一部分导致了问题：

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

So basically "hiding" ARIA element with left: -10000px is not compatible with rtl documents, since clearly it's going to add this huge gap due to negative left. 因此，基本上将“ ARIA”元素“隐藏”在left: -10000px与rtl文档不兼容，因为显然由于负的左侧它会增加这个巨大的差距。

One way to fix it is to force this aria-lable to render with left: auto and move it far to the top instead: 修复此问题的一种方法是强制将aria-lable渲染为left: auto然后将其移动到顶部远：

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

Demo: https://jsfiddle.net/57oe0ktz/ 演示： https : //jsfiddle.net/57oe0ktz/

谷歌图表HTML从右到左的问题

问题描述

1 个解决方案

解决方案1
4 已采纳 2015-07-26 07:37:33

谷歌图表HTML从右到左的问题

问题描述

1 个解决方案

解决方案1 4 已采纳 2015-07-26 07:37:33

解决方案1
4 已采纳 2015-07-26 07:37:33