無法添加水平滾動條到我的圖表

Question

我正在處理angularjs谷歌圖表。我使用的是angularjs google的柱形圖以列的形式顯示數據，問題是當我有更多的數據顯示欄寬度正在減小時。如果數據更多地顯示，如示例here所示，我想用水平滾動條顯示圖表。 我試圖實現相同，但無法顯示滾動條，任何建議都會有所幫助。

我的示例演示here

JS代碼：

angular.module('myApp', ['googlechart']) 
    .controller('myController', function($scope) { 
    var chart1 = {}; 
    chart1.type = "ColumnChart"; 
    chart1.displayed = false; 
    chart1.data = { 
     "cols": [{ 
     id: "month", 
     label: "Month", 
     type: "string" 
     }, { 
     id: "laptop-id", 
     label: "Laptop", 
     type: "number" 
     }, { 
     id: "desktop-id", 
     label: "Desktop", 
     type: "number" 
     }, { 
     id: "server-id", 
     label: "Server", 
     type: "number" 
     }, { 
     id: "cost-id", 
     label: "Shipping", 
     type: "number" 
     }], 
     "rows": [{ 
     c: [{ 
      v: "January" 
     }, { 
      v: 19, 
      f: "42 items" 
     }, { 
      v: 12, 
      f: "Ony 12 items" 
     }, { 
      v: 7, 
      f: "7 servers" 
     }, { 
      v: 4 
     }] 
     }, { 
     c: [{ 
      v: "February" 
     }, { 
      v: 13 
     }, { 
      v: 1, 
      f: "1 unit (Out of stock this month)" 
     }, { 
      v: 12 
     }, { 
      v: 2 
     }] 
     }, { 
     c: [{ 
      v: "March" 
      }, { 
      v: 24 
      }, { 
      v: 5 
      }, { 
      v: 11 
      }, { 
      v: 6 
      } 

     ] 
     }, { 
     c: [{ 
      v: "April" 
      }, { 
      v: 24 
      }, { 
      v: 5 
      }, { 
      v: 11 
      }, { 
      v: 6 
      } 

     ] 
     }, { 
     c: [{ 
      v: "May" 
      }, { 
      v: 18 
      }, { 
      v:11 
      }, { 
      v: 7 
      }, { 
      v:2 
      } 

     ] 
     }, { 
     c: [{ 
      v: "June" 
      }, { 
      v: 21 
      }, { 
      v: 5 
      }, { 
      v: 8 
      }, { 
      v: 6 
      } 

     ] 
     }, { 
     c: [{ 
      v: "July" 
      }, { 
      v: 24 
      }, { 
      v: 5 
      }, { 
      v: 9 
      }, { 
      v: 9 
      } 

     ] 
     }, { 
     c: [{ 
      v: "August" 
      }, { 
      v: 14 
      }, { 
      v: 1 
      }, { 
      v: 11 
      }, { 
      v: 5 
      } 

     ] 
     }, { 
     c: [{ 
      v: "September" 
      }, { 
      v: 4 
      }, { 
      v: 2 
      }, { 
      v: 51 
      }, { 
      v: 6 
      } 

     ] 
     }, { 
     c: [{ 
      v: "October" 
      }, { 
      v: 34 
      }, { 
      v: 4 
      }, { 
      v: 0 
      }, { 
      v: 1 
      } 

     ] 
     }] 
    }; 
    chart1.options = { 
     "title": "Sales per month", 
     "colors": ['#0000FF', '#009900', '#CC0000', '#DD9900'], 
     "defaultColors": ['#0000FF', '#009900', '#CC0000', '#DD9900'], 
     "isStacked": "true", 
     "fill": 20, 
     "displayExactValues": true, 
     "vAxis": { 
     "title": "Sales unit", 
     "gridlines": { 
      "count": 10 
     } 
     }, 
     "hAxis": { 
     "title": "Date" 
     } 
    }; 
    chart1.view = { 
     columns: [0, 1, 2, 3, 4] 
    }; 
    $scope.myChart = chart1; 

    $scope.seriesSelected = function(selectedItem) { 
     console.log(selectedItem); 
     var col = selectedItem.column; 
     //If there's no row value, user clicked the legend. 
     if (selectedItem.row === null) { 
     //If true, the chart series is currently displayed normally. Hide it. 
     console.log($scope.myChart.view.columns[col]); 
     if ($scope.myChart.view.columns[col] == col) { 
      //Replace the integer value with this object initializer. 
      $scope.myChart.view.columns[col] = { 
      //Take the label value and type from the existing column. 
      label: $scope.myChart.data.cols[col].label, 
      type: $scope.myChart.data.cols[col].type, 
      //makes the new column a calculated column based on a function that returns null, 
      //effectively hiding the series. 
      calc: function() { 
       return null; 
      } 
      }; 
      //Change the series color to grey to indicate that it is hidden. 
      //Uses color[col-1] instead of colors[col] because the domain column (in my case the date values) 
      //does not need a color value. 
      $scope.myChart.options.colors[col - 1] = '#CCCCCC'; 
     } 
     //series is currently hidden, bring it back. 
     else { 
      console.log("Ran this."); 
      //Simply reassigning the integer column index value removes the calculated column. 
      $scope.myChart.view.columns[col] = col; 
      console.log($scope.myChart.view.columns[col]); 
      //I had the original colors already backed up in another array. If you want to do this in a more 
      //dynamic way (say if the user could change colors for example), then you'd need to have them backed 
      //up when you switch to grey. 
      $scope.myChart.options.colors[col - 1] = $scope.myChart.options.defaultColors[col - 1]; 
     } 
     } 
    }; 
    }); 

我試圖通過添加下面的代碼在我的js代碼上面chart1.options，但它並沒有奏效：

width: chart1.data.getNumberOfRows() * 130, 
bar: {groupWidth: 90}, 

Answer 1

在你的HTML你可以設置寬度和設置如何做溢出像這樣

<div ng-controller="myController"> 
    <div google-chart chart="myChart" style="width:400px;height:500px;overflow-x:scroll"></div> 
    <br><br> 
    <div google-chart chart="myChart"></div> 
    </div> 

，或者你可以如做

<div ng-controller="myController"> 
<div google-chart chart="myChart" style="height:500px;overflow-x:auto"></div> 
<br><br> 
<div google-chart chart="myChart"></div> 

在您所附加的小提琴，他們已經使用CSS樣式，請reffer說。

更新

，你必須根據自己requirement.The上述結構設置圖表屬性

  "width": chart1.data.rows.length *65, 
      "bar": {groupWidth: 20}, 

具有根據你的need.You可以看到一個例子here即要被操縱。你正在接受的鏈接。請找到相同https://plnkr.co/edit/o8iccmrB13NdDAKCxb7Z?p=preview的普拉克（如果你不能觀看，請在版本部分中看到）

更新 如果您使用的異步調用數據，那麼，裏面

MyDataService.getChartDataFromService().then(
      function (response) { 
//other codes 
.......//set options here 

})) 

Answer 2

設置選項在你的div標籤你需要設置滾動溢出。

<div google-chart chart="myChart" style="overflow:scroll"></div> 

我在演示中進行了更改。