我在角度应用程序中处理谷歌图表。场景是当用户点击图表的图例时,相应的数据隐藏在图表上。我想限制数据的隐藏,以便没有数据时图表不是空白。至少应该可以看到一系列数据。用户可以选择图例并仅隐藏3个图例数据,当用户选择第4个图例时,我需要显示“不能隐藏图表的完整数据”的警报并停止隐藏该图例的数据。
工作样本https://plnkr.co/edit/OBsZFO8LerlKcWAu65sZ?p=preview
在上面的示例中,用户可以隐藏所有图例的数据,图表区域将为空白。我需要限制,以便始终在图表上显示一个图例数据。任何输入都会有所帮助。
js code:
angular.module('myApp', ['googlechart'])
.controller('myController', function($scope) {
var chart1 = {};
chart1.type = "LineChart";
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
}
]
}]
};
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;
var hidden = [];
$scope.seriesSelected = function(selectedItem) {
var col = selectedItem.column;
hidden.push(col);
/* if (hidden.length === ($scope.myChart.view.columns.length -1 )) {
window.alert("you can't remove all cols!");
}*/
console.log(selectedItem);
//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]);
$scope.reset = function() {
for (var i = 0; i < hidden.length; i++) {
var hiddenCol = hidden[i];
$scope.myChart.view.columns[hiddenCol] = hiddenCol;
$scope.myChart.options.colors[hiddenCol - 1] = $scope.myChart.options.defaultColors[hiddenCol - 1];
}
//$scope.myChart.view.columns[col] = col;
//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];
}
}
$scope.serverId = chart1.data.rows[selectedItem.row].c[3].v;
alert("serverid : " + $scope.serverId);
};
});
html代码:
<div ng-controller="myController">
<div google-chart chart="myChart" on-select="seriesSelected(selectedItem)"></div></div>
如果网页上只显示一个图例数据,则需要通过选择图例来隐藏数据来限制用户。
答案 0 :(得分:0)
这似乎对我有用......
var hidden = [];
$scope.seriesSelected = function(selectedItem) {
if (hidden.length === 3) {
window.alert("you can't remove all cols!");
return 0;
}
var col = selectedItem.column;
hidden.push(col);
console.log(selectedItem);
//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]);
$scope.reset = function() {
for (var i = 0; i < hidden.length; i++) {
var hiddenCol = hidden[i];
$scope.myChart.view.columns[hiddenCol] = hiddenCol;
$scope.myChart.options.colors[hiddenCol - 1] = $scope.myChart.options.defaultColors[hiddenCol - 1];
}
hidden = [];
//$scope.myChart.view.columns[col] = col;
//console.log($scope.myChart.view.columns[col]);
}
答案 1 :(得分:0)
好的,你只需要控制隐藏的系列。在隐藏序列数组中添加或删除。
重要的部分:
var colIndex = hidden.indexOf(col);
if (hidden.length === ($scope.myChart.view.columns.length-2) && colIndex == -1) {
window.alert("you can't remove all cols!");
}
else{
if(colIndex == -1){
hidden.push(col);
}
else{
hidden.splice(colIndex, 1);
}
并且您必须在清除图表时重置隐藏的数组:
$scope.reset = function() {
for (var i = 0; i < hidden.length; i++) {
var hiddenCol = hidden[i];
$scope.myChart.view.columns[hiddenCol] = hiddenCol;
$scope.myChart.options.colors[hiddenCol - 1] = $scope.myChart.options.defaultColors[hiddenCol - 1];
}
hidden = [];
};