我正在开发angularjs谷歌排行榜。我正在使用angularjs google柱形图以列的形式显示数据，问题是当我有更多数据显示条宽度正在减少时。如果要显示的数据更多，我想显示带有水平滚动条的图表，如示例here中所示。 我尝试实现相同但无法显示滚动条，任何建议都会有所帮助。
我的示例演示here
js code：
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];
}
}
};
});
我尝试在chart1.options上面的js代码中添加以下代码，但它没有用：
width: chart1.data.getNumberOfRows() * 130,
bar: {groupWidth: 90},
答案 0 :(得分：0)
在你的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样式，请提供。
<强>更新
，您必须将图表属性设置为
"width": chart1.data.rows.length *65,
"bar": {groupWidth: 20},
根据您的要求。上述配置必须根据您的需要进行操作。您可以看到示例here即。你正在提供的链接。请查找同一https://plnkr.co/edit/o8iccmrB13NdDAKCxb7Z?p=preview的插件（如果您无法查看，请参阅版本部分）
<强>更新 如果您正在使用来自异步调用的数据，请在
中设置选项MyDataService.getChartDataFromService().then(
function (response) {
//other codes
.......//set options here
}))
答案 1 :(得分：0)
在div标签中，您需要设置滚动以进行溢出。
<div google-chart chart="myChart" style="overflow:scroll"></div>
我在演示中进行了更改。