谷歌图表如何通过点击图例来隐藏线条
谷歌图表如何通过点击图例来隐藏线条
提问于 2017-05-16 17:48:32
使用下面的google图表，我如何通过单击图例来隐藏一条线？它目前有两行Elec和天然气，我希望能够隐藏或显示每个人的基础上点击相应的图例。我知道我必须在图表中添加一个事件侦听器函数，但我有点不知道如何在这个特定的图表上做到这一点。我能找到的示例的执行方式略有不同。
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);
}回答 1
Stack Overflow用户
发布于 2017-05-16 18:29:02
我可以通过将以下代码添加到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);
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43998015
复制相关文章
相似问题