使用以下谷歌图表，如何通过点击图例来隐藏线条？它目前有两条线Elec和Gas我希望能够隐藏或显示每条线基于点击相应的图例。我知道我必须在图表中添加一个事件监听器功能，但我在这个特定的图表上有点失去了如何做到这一点。我能找到的例子略有不同。
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Time', 'Electricity', 'Gas'],
[new Date('2017-05-01') , 12.903, 4.624],
[new Date('2017-05-02') , 15.82, 34.4],
[new Date('2017-05-03') , 9.087, 29.542],
[new Date('2017-05-04') , 11.094, 18.003],
[new Date('2017-05-05') , 10.709, 16.573],
[new Date('2017-05-06') , 10.547, 67.86],
[new Date('2017-05-07') , 22.491, 4.011],
[new Date('2017-05-08') , 14.245, 14.898],
[new Date('2017-05-09') , 0, 0],
[new Date('2017-05-10') , 0, 0],
[new Date('2017-05-11') , 0, 0],
[new Date('2017-05-12') , 0, 0],
[new Date('2017-05-13') , 0, 0],
[new Date('2017-05-14') , 0, 0],
[new Date('2017-05-15') , 0, 0],
[new Date('2017-05-16') , 0, 0],
[new Date('2017-05-17') , 0, 0],
[new Date('2017-05-18') , 0, 0],
[new Date('2017-05-19') , 0, 0],
[new Date('2017-05-20') , 0, 0],
[new Date('2017-05-21') , 0, 0],
[new Date('2017-05-22') , 0, 0],
[new Date('2017-05-23') , 0, 0],
[new Date('2017-05-24') , 0, 0],
[new Date('2017-05-25') , 0, 0],
[new Date('2017-05-26') , 0, 0],
[new Date('2017-05-27') , 0, 0],
[new Date('2017-05-28') , 0, 0],
[new Date('2017-05-29') , 0, 0],
[new Date('2017-05-30') , 0, 0],
[new Date('2017-05-31') , 0, 0],
]);
var dateRange = data.getColumnRange(0);
var oneDay = (1000 * 60 * 60 * 24);
var ticksAxisH = [];
for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneDay) {
// add tick every 3 days
if ((((i - dateRange.min.getTime()) / oneDay) % 3) === 0) {
ticksAxisH.push(new Date(i));
}
}
// ensure last day is added
if (ticksAxisH[ticksAxisH.length - 1].getTime() !== dateRange.max.getTime()) {
ticksAxisH.push(dateRange.max);
}
var options = {
chartArea: {
width: "80%"
},
width: 900,
height: 500,
hAxis: {
title: 'Daily Total',
viewWindowMode: 'pretty',
ticks: ticksAxisH,
slantedText: false,
format: 'd MMM yy',
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'black',
fontSize: 12,
fontName: 'Arial',
bold: true,
italic: false,
textAlign: 'right'
},
titleTextStyle: {
color: 'black',
fontSize: 16,
fontName: 'Arial',
bold: true,
italic: false
},
},
vAxis: {
title: 'kWh',
titleTextStyle: {
color: 'black',
fontSize: 16,
fontName: 'Arial',
bold: true,
italic: false
},
textStyle: {
color: 'black',
fontSize: 12,
fontName: 'Arial',
bold: true,
italic: false
},
},
legend: {
position: 'top',
width: "90%"
},
backgroundColor: '#fff',
colors: ['#f36daa', '#51b9d2'],
};
var chart = new google.visualization.AreaChart(document.getElementById('graph-tab-2'));
chart.draw(data, options);
}
答案 0 :(得分：3)
我能够通过将以下代码添加到char来实现它。有关详细信息Show/hide lines/data in Google Chart
，请参阅此问题和答案var columns = [];
var series = {};
for (var i = 0; i < data.getNumberOfColumns(); i++) {
columns.push(i);
if (i > 0) {
series[i - 1] = {};
}
}
google.visualization.events.addListener(chart, 'select', function () {
var sel = chart.getSelection();
// if selection length is 0, we deselected an element
if (sel.length > 0) {
// if row is undefined, we clicked on the legend
if (sel[0].row === null) {
var col = sel[0].column;
if (columns[col] == col) {
// hide the data series
columns[col] = {
label: data.getColumnLabel(col),
type: data.getColumnType(col),
calc: function () {
return null;
}
};
// grey out the legend entry
series[col - 1].color = '#CCCCCC';
} else {
// show the data series
columns[col] = col;
series[col - 1].color = null;
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view, options);
}
}
});