Google Charts API：在图例上显示/隐藏系列点击。怎么样？ [英] Google Charts API: Show/Hide Series on Legend Click. How?
本文介绍了Google Charts API：在图例上显示/隐藏系列点击。怎么样？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在网上找到了以下代码，并希望将其改编为现有代码。
I found the following code online and would like to adapt it to my existing code.
以下是显示/隐藏数据系列的代码点击后我发现：
Here's the code to show/hide data series on click I found:
http://jsfiddle.net/asgallant/ 6gz2Q /
到目前为止，这是我的改编：
function drawChart() {
var data = new google.visualization.arrayToDataTable([
['Draw', '1997', '1998'],
['1', 1236777, 1408007],
['2', 834427, 572882],
['3', 2164890, 1614181],
['4', 1893574, 3897171],
['5', 2851881, 673906],
['6', 359504, 630853]
]);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
// create columns array
var columns = [];
// display these data series by default
var defaultSeries = [1];
var series = {};
for (var i = 0; i < data.getNumberOfColumns(); i++) {
if (i == 0 || defaultSeries.indexOf(i) > -1) {
// if the column is the domain column or in the default list, display the series
columns.push(i);
}
else {
// otherwise, hide it
columns[i] = {
label: data.getColumnLabel(i),
type: data.getColumnType(i),
calc: function () {
return null;
}
};
}
if (i > 0) {
// set the default series option
series[i - 1] = {};
if (defaultSeries.indexOf(i) == -1) {
// backup the default color (if set)
if (typeof(series[i - 1].color) !== 'undefined') {
series[i - 1].backupColor = series[i - 1].color;
}
series[i - 1].color = '#CCCCCC';
}
}
}
// Options customize what goes inside our chart.
var options = {
fontName: 'verdana',
fontSize: 12,
// Curve the series line.
curveType: "function",
title: 'Title of Chart',
// disables tooltip on hover data points
enableInteractivity: true,
// Enable/Disable tooltip. selection or none.
tooltip: { trigger: 'none' },
// Select multiple Data points.
selectionMode: 'multiple',
// Customize vAxis ---------------------------------------------------------
vAxis: {
gridlines: {color: 'black', count: 5},
title: 'Title of vAxis',
// Affects only the Title. eg. Not title.
titleTextStyle: {fontName: 'verdana', fontSize: 10, color: 'black', bold: false, italic: false},
// Range of data for vAxis eg. min: 0, max:9
viewWindow: {min: 0, max: 5006386},
// Affects only the Range. eg. Not title.
textStyle: {fontName: 'verdana', fontSize: 12, color: 'black', bold: false, italic: false}
},
// Customize hAxis ---------------------------------------------------------
hAxis: {
title: 'Title of hAxis',
// Affects only the Title. eg. Not title.
titleTextStyle: {fontName: 'verdana', fontSize: 10, color: 'black', bold: false, italic: false},
// Affects only the Range. eg. Not title.
textStyle: {fontName: 'verdana', fontSize: 10, color: 'black', bold: false, italic: false}
},
// Customize Series ---------------------------------------------------------
series: {
0: {lineWidth: 1, pointSize: 4},
1: {lineWidth: 1, pointSize: 4},
2: {lineWidth: 1, pointSize: 4}
},
// Customize Annotations ---------------------------------------------------------
annotations: {
textStyle: {fontName: 'verdana', fontSize: 10, color: 'black', bold: false, italic: false, auraColor: 'none'}
},
// Custome Legends ---------------------------------------------------------
legend: {
// Position top, right, bottom, left.
position: 'top',
// Align at the star, center or end.
alignment: 'start',
// Affects only the Range. eg. Not title.
textStyle: {fontName: 'verdana', fontSize: 10, color: 'black', bold: false, italic: false}
}
}; // End Options
function showHideSeries () {
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);
}
}
}
google.visualization.events.addListener(chart, 'select', showHideSeries);
// create a view with the default columns
var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view, options);
}
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
...这就是我真正想要了解如何合并到此代码中。我似乎无法弄明白。这让我疯了！
// Declare our Columns and set types, roles, etc.
view.setColumns([
0,
1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" },
2, { calc: "stringify", sourceColumn: 2, type: "string", role: "annotation" },
3, { calc: "stringify", sourceColumn: 3, type: "string", role: "annotation" }
]);
推荐答案
尝试替换此部分：
if (i == 0 || defaultSeries.indexOf(i) > -1) {
// if the column is the domain column or in the default list, display the series
columns.push(i);
}
这个：
if (i == 0 || defaultSeries.indexOf(i) > -1) {
// if the column is the domain column or in the default list, display the series
columns.push(i);
if (i > 0) {
columns.push({
calc: "stringify",
sourceColumn: i,
type: "string",
role: "annotation"
});
}
}
这篇关于Google Charts API：在图例上显示/隐藏系列点击。怎么样？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
