1
私はangularjs google chartで作業しています。私はグラフの水平スクロールバーを表示する必要があります、そして、それはデフォルトで右から左にスクロールする必要があります。右から左に、私は下のstyle属性で定義された以下のCSSコードを使用しているから、デフォルトのスクロールでスクロールバーを作るために右から左にスクロールすると左側の白い空白を取り除くことができません
サンプルデモhttp://jsfiddle.net/uzbozqz4/
：
<div id="chart_div" style="margin-left:0;white-space: nowrap;overflow-x:auto;overflow-y:hidden;direction:rtl;left:0;top:0;height: 500px;"></div>
direction:rtlは右から左にスクロールバーのスクロールを作りますそれは必要ですが、問題は右から左にスクロールすると、をスクロールすると、左側にの空白が多く見えます。私は左パディングを使用してみました：0px;それでも空白が表示されます。右から左にスクロールしたときに左の余分な空白を取り除く方法に関する提案はありますか？
コード：
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="margin-left:0;white-space: nowrap;overflow-x:auto;overflow-y:hidden;direction:rtl;left:0;top:0;height: 500px;"></div>
</body>
</html>
PS：私はdirection:rtl余分な空白を削除示したが、私の要件ごとに私は右から左にスクロール水平スクロールバーを作ってそれを使用する必要はありません。
div {
left: -1000px
}
aria-labelによって標的化されることができ ：div要素の
しかし、その後、スクロールバーが欠落している、特定のバーが表示された後、 @ ovokuro – user7833845
どのスクロールバーが見つからないのですか？画面のサイズを変更すると水平スクロールバーが表示されます – sol
右から左にスクロールするCSSコードを適用する前にデモを試してください：マウスオーバー時のツールチップが期待どおりに表示される https://plnkr.co/edit/SwEUeCN8IoT0JN5RrvUx?p=preview 右から左にスクロールするCSSコードを適用した後のデモンストレーション：バーのマウスオーバー時のツールチップが期待通りに表示されない https://plnkr.co/edit/INfdkrotpyo87fpdN9rR?p=preview。提案したようにCSSコードを適用した後、バーのマウスオーバー時のツールチップがうまくいかず、提案はありますか？ @ovokuro – user7833845