Question

默认情况下，从右手侧到左手侧保持水平滚动时，我注意到要移除的左侧有一个空白区域。从右侧向左侧滚动时，问题无法移除左侧显示的空白区域。任何建议都会有所帮助。

      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Adult', 'Child','Infant', 'Senior'],
          ['2004',  11,      14, 2, 9],
          ['2005',  12,      14, 2, 9],
          ['2004',  13,      14, 2, 9],
          ['2005',  14,      14, 2, 9],
          ['2004',  15,      14, 2, 9],
          ['2005',  11,      14, 2, 9],
          ['2004',  12,      14, 2, 9],
          ['2005',  13,      14, 2, 9],
          ['2004',  14,      14, 2, 9],
          ['2005',  15,      14, 2, 9],
          ['2004',  11,      14, 2, 9],
          ['2005',  12,      14, 2, 9],
          ['2004',  13,      14, 2, 9],
          ['2005',  14,      14, 2, 9],
          ['2004',  15,      14, 2, 9],
          ['2005',  11,      14, 2, 9],
          ['2004',  12,      14, 2, 9],
          ['2005',  13,      14, 2, 9],
          ['2004',  14,      14, 2, 9],
          ['2005',  15,      14, 2, 9],
          ['2004',  11,      14, 2, 9],
          ['2005',  12,      14, 2, 9],
          ['2004',  13,      14, 2, 9],
          ['2005',  14,      14, 2, 9]
        
          
        ]);

        var options = {            
          title: 'Company Performance',
          hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
          width: data.getNumberOfRows() * 130,
          bar: {groupWidth: 90},
          chartArea: {left:60, width:'94%'} 
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

#chart_div {
 overflow-x: auto; 
 overflow-y: hidden;     
  direction:rtl;
height:500px;
        
}

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

尝试使用margin-left : 0px;left:0px;，但没有运气。

- Edited-- 如上所述，我希望滚动条从右向左滚动，这就是使用direction:rtl的原因。

Answer 1

使用display:inline-block;它会删除空格

如下所示

#chart_div {
overflow-x: auto; 
overflow-y: hidden;     
direction:rtl;
height:500px;
display:inline-block;       
}

Working fiddle

Answer 2

只需从CSS代码中删除direction:rtl;即可。

这里有jsfiddle http://jsfiddle.net/rhulkashyap/kjwhnx1q/3/

CSS代码：

#chart_div {
    overflow-x: auto;
    overflow-y: hidden;
    height: 500px;
}

Answer 3

我不确定，为什么你需要这里的方向。删除它时工作正常。

这是fiddle正常工作。

检查此reference以了解有关方向属性的更多信息。

'url' => env('APP_URL', 'http://localhost/test4'),

Answer 4

<style>
#chart_div {
 overflow-x: auto;
 overflow-y: hidden;
 direction: rtl;
 height: 500px;
 display: inline-block;
  margin-left: -20px;
 }
</style>

css代码删除不必要的空格

4 个答案: