英文:
hello i am using google charts, i would like to display only particular" legend" which is clicked and remaining should be hiden,
问题
I am unable to display legend which is clicked
one one legend is clicked,
i should get only the legend which is clicked.
the below script hides the legend which is clicked..
can you please help for where i could able to display only the legend which is clicked using google charts
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];
}
else {
// show the data series
columns[col] = col;
series[col - 1].color = null;
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
console.log(view);
chart.draw(view, options);
}
}
});
英文:
i am unable to display legend which is clicked
one one legend is clicked,
i should get only the legend which is clicked.
the below script hides the legend which is clicked..
can you please help for where i could able to display only the legend which is clicked using google charts
`
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];
}
else {
// show the data series
columns[col] = col;
series[col - 1].color = null;
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
console.log(view);
chart.draw(view, options);
}
}
});
答案1
得分: 0
I found my answer.
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', function() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var legend = data.getColumnLabel(selectedItem.column);
if (legendSelected) {
chart.draw(data, options);
legendSelected = false;
}
var view = new google.visualization.DataView(data);
view.setColumns([0, selectedItem.column]);
chart.draw(view, options);
alert('Selected legend: ' + legend);
legendSelected = true;
} else if (legendSelected) {
chart.draw(data, options);
alert('All legends displayed again.');
legendSelected = false;
}
});
google.visualization.events.addListener(chart, 'click', function() {
if (legendSelected) {
chart.draw(data, options);
legendSelected = false;
}
});
chart.draw(data, options);
英文:
i found my answer
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', function() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var legend = data.getColumnLabel(selectedItem.column);
if (legendSelected) {
chart.draw(data, options);
legendSelected = false;
}
var view = new google.visualization.DataView(data);
view.setColumns([0, selectedItem.column]);
chart.draw(view, options);
alert('Selected legend: ' + legend);
legendSelected = true;
} else if (legendSelected) {
chart.draw(data, options);
alert('All legends displayed again.');
legendSelected = false;
} }); google.visualization.events.addListener(chart, 'click', function() {
if (legendSelected) {
chart.draw(data, options);
legendSelected = false;
} }); chart.draw(data, options);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论