Grafici Google HTML da sinistra a numero

Ho un bug strano mentre utilizzo Google Charts con il tag dir = "rtl" nell'html per le pagine Web da destra a sinistra.Grafici Google HTML da sinistra a numero

Quello che succede è che la pagina ottiene uno spazio enorme e scorre verso sinistra senza motivo. Succede su Chrome e Safari.

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

Questo è il modo più semplice per riprodurre il bug sulla 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>

Ho anche provato ad aggiungere Lang e dir al div grafico mantenendo la rtl tag nell'html principale ma non ha funzionato

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

fonte

2015-07-26 Ether

Provare a impostare in questo modo:

–

@VimalanJayaGanesh OP vuole averlo nella radice poiché la pagina è chiaramente una lingua rtl (arabo) –

@ RokoC.Buljan è corretto, la pagina è una pagina araba rtl e basta aggiungere un grafico di Google ad esso. – Ether

Controllo rendering HTML con gli ispettori di pagina sembra che questa parte del codice HTML causa il problema:

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

Quindi, in pratica "nascondere" l'elemento ARIA con left: -10000px non è compatibile con i documenti RTL, dato che chiaramente sta andando a aggiungere questo enorme divario dovuto alla sinistra negativa.

Un modo per risolvere il problema è quello di forzare quest'aria-etichetta per rendere con left: auto e spostarla fino alla parte superiore, invece:

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

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

fonte

2015-07-26 07:37:33 dfsq

Sei fantastico. Grazie a questo ha funzionato perfettamente. Non sono sicuro di alcun effetto collaterale, ma finora sembra chiaro come un cielo blu. Non sono sicuro di come hai trovato la causa della etichetta aria. Mi sono guardato intorno con gli strumenti di sviluppo di Chrome e non l'ho trovato. – Ether

Suppongo che non ci dovrebbero essere effetti collaterali. Ci sarebbe se si dovesse nascondere questa aria-lebel con 'display: none', quindi si fisserebbe anche il gap, ma poi gli screen reader non riuscirebbero a trovare il contenuto dell'accessibilità. Lo spostamento verso la parte superiore negativa non è diverso da sinistra: -100000. – dfsq

grazie mille :) questo mi ha aiutato dopo una lunga giornata di debug –

Grafici Google HTML da sinistra a numero

risposta

Problemi correlati