我正在努力在点击googlecharts的传奇时隐藏一个系列。 问题是，当我添加一个额外的列，用于显示栏上的工具提示时，功能正在破坏。 请在下面找到演示：
不使用额外的列添加：https://plnkr.co/edit/qXY4Lw4P2N8hNGTg9blv?p=preview
工作代码：https://plnkr.co/edit/gRxEgboZCgAkkQ8XfOsr?p=preview
js code：
angular.module('myApp', ['googlechart'])
.controller('myController', function($scope) {
var chart1 = {};
chart1.type = "ColumnChart";
chart1.displayed = false;
var myTooltip = {
role: "tooltip",
type: "string"
};
chart1.data = {
"cols": [{
id: "month",
label: "Month",
type: "string"
}, {
id: "laptop-id",
label: "Laptop",
type: "number"
},myTooltip, {
id: "desktop-id",
label: "Desktop",
type: "number"
}, {
id: "server-id",
label: "Server",
type: "number"
}, {
id: "cost-id",
label: "Shipping",
type: "number"
}],
"rows": [ {
c: [{
v: "Jan"
}, {
v: 13
},{
v: "laptop tooltip bar1"
}, {
v: 1,
f: "1 unit (Out of stock this month)"
}, {
v: 12
}, {
v: 2
}]
} ,{
c: [{
v: "February"
}, {
v: 13
},{
v: "laptop tooltip bar2"
}, {
v: 1,
f: "1 unit (Out of stock this month)"
}, {
v: 12
}, {
v: 2
}]
}, {
c: [{
v: "March"
}, {
v: 24
},{
v: "laptop tooltip bar3"
}, {
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,
tooltip: {textStyle: {fontName: '"Arial"', bold: "true", fontSize: "14"}},
"vAxis": {
"title": "Sales unit",
"gridlines": {
"count": 10
}
},
"hAxis": {
"title": "Date"
}
};
chart1.view = {
columns: [0, 1, 2, 3, 4,5]
};
$scope.myChart = chart1;
var hidden = [];
$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.seriesSelected = function(selectedItem) {
if (selectedItem.row === null) {
var col = selectedItem.column;
var colIndex = hidden.indexOf(col);
if (hidden.length === ($scope.myChart.view.columns.length -3 ) && colIndex == -1) {
window.alert("One seies of data should be available all time");
}
else{
if(colIndex == -1){
hidden.push(col);
}
else{
hidden.splice(colIndex, 1);
}
if ($scope.myChart.view.columns[col] == col) {
$scope.myChart.view.columns[col] = {
label: $scope.myChart.data.cols[col].label,
type: $scope.myChart.data.cols[col].type,
//hiding the series.
calc: function() {
return null;
}
};
//grey color for the hidden data.
$scope.myChart.options.colors[col - 1] = '#CCCCCC';
}
else {
$scope.myChart.view.columns[col] = col;
$scope.myChart.options.colors[col - 1] = $scope.myChart.options.defaultColors[col - 1];
}
}
}
};
});
有什么建议吗？存在问题当存在额外列时（例如：显示工具提示）并且该列未显示在图例中。
答案 0 :(得分：1)
问题不在图表本身，而在于颜色！
在谷歌排行榜中，工具提示被列为列他们在列定义中有相关索引，因为我们现在有一个工具提示作为第3列（即索引{{1颜色索引与列的颜色索引不同步，因此工具提示后的列获得的颜色与该列的索引相同减去2 （即2而不是{{ 1}}）
我们可以通过想象堆叠的col - 2和col - 1数组来形象化这个问题，如下所示：
color column index: 0 | 1 | 2 | 3 | 4 | 5 如果我们制作columns: col-x | col1 | tooltip1| col2 | col3 | col4 .. colors: color1| color2| color3 | color4| ---- | ----之类的对，并将所有column1 - color1 分组（在这种情况下为columnN - colorN和columns without color ，我们可以看到列的颜色索引应该是col-x，例如，tooltip1的颜色索引应为[column's index] - [num of (columns without color) before column's index]，对于col2：col1等等。
考虑到这一点，我们可以通过创建变量1 - 1 === 0，为列的定义中的每个3 - 2 === 1递增和分配变量来轻松解决此问题：
var colorIndex = 0然后使用colum的column with color created属性来获取相应的颜色：
"cols": [
{
id: "month",
label: "Month",
type: "string"
},
{
id: "laptop-id",
label: "Laptop",
type: "number",
colorIndex: colorIndex++
},
{
role: "tooltip",
type: "string",
p: {
'html': true
}
},
{
id: "desktop-id",
label: "Desktop",
type: "number",
colorIndex: colorIndex++
},
{
id: "server-id",
label: "Server",
type: "number",
colorIndex: colorIndex++
},
{
id: "cost-id",
label: "Shipping",
type: "number",
colorIndex: colorIndex++
}
]