我能够通过引用这个问题获得以下代码工作，但很难更改工具提示
所以我努力使工具提示起作用并使其工作，但很难让两者正常工作
谢谢！
代码示例 1：隐藏行
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'Attention Phase Harmony');
data.addColumn('number', 'Clarity of Periphery');
data.addColumn('number', 'Body Temperature');
data.addColumn('number', 'Clarity of Center of Attention');
data.addColumn('number', 'Energetic Phenomena');
data.addColumn('number', 'Pain-Pleasure');
data.addColumn('number', 'Mental Illness');
data.addColumn('number', 'Mind Speed');
data.addColumn('number', 'Motivation');
data.addColumn('number', 'Powers');
data.addColumn('number', 'Sleep');
data.addRow([1, 4, 0, 0, 1, -4, 2, -4, 1, 3, 1, 0 ]);
data.addRow([2, 2, 1, 1, 1, 2, 0, -3, 2, 0, 0, 0 ]);
data.addRow([3, -1, 1, 2, 1, 3, -4, 0, 3, -4, -1, 2 ]);
data.addRow([4, 4, 1, 4, 4, 4, 4, 3, 4, 4, 4, -4 ]);
data.addRow([5, 0, -2, -4, -4, -4, 2, -3, -4, -3, 0, 4 ]);
data.addRow([6, 2, 3, 1, -2, 1, 1, 3, 2, -2, 1, 0 ]);
data.addRow([7, -2, 3, -1, -3, -3, -2, 3, -1, -2, -1, 2 ]);
data.addRow([8, -3, 3, 0, -2, -3, -3, 3, 2, 2, -2, 2 ]);
data.addRow([9, -3, 3, 0, -3, 0, -3, 2, 3, 3, -3, 2 ]);
data.addRow([10, -4, 4, 1, -4, 2, -4, 4, 4, -4, -4, 3 ]);
data.addRow([11, 4, 3, 0, 3, 0, 1, -2, 0, -2, 3, 0 ]);
alert(data.getNumberOfColumns());
// 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';
}
}
}
var options = {
pointSize: 5,
width: 1000,
height: 400,
series: series,
curveType: 'function',
vAxis: {
viewWindow:{
max:5,
min:-5
},
gridlines: { count: 11, color: '#CCC' }
},
chartArea: {width: '60%'},
hAxis: {
title: "Nanas",
gridlines: { count: 11, color: '#CCC' }
,slantedTextAngle:90 ,textStyle: {fontSize: 13}
}
}
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);
</script>
</head>
<body>
<div id="chart_div"></div>
<div id="creativeCommons" style="text-align: center; width: 400px;">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Code to turn on or off data series by clicking on legend entries</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Andrew Gallant</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
</div>
</body>
</html>
代码示例 2：工具提示
function drawChart() {
var data = google.visualization.arrayToDataTable([
["X",
"Attention Phase Harmony", {label: 'Tooltip', role: 'tooltip'},
"Clarity of Periphery", {label: 'Tooltip', role: 'tooltip'},
"Body Temperature", {label: 'Tooltip', role: 'tooltip'},
"Clarity of Center of Attention", {label: 'Tooltip', role: 'tooltip'}],
[1, 0, "APH", null,null,null,null,null,null],
[2, 1, "APH", null,null,null,null,null,null],
[3, 1, "APH", null,null,null,null,null,null],
[4, 1, "APH", null,null,null,null,null,null],
[5, -2, "APH", null,null,null,null,null,null],
[6, 3, "APH", null,null,null,null,null,null],
[7, 3, "APH", null,null,null,null,null,null],
[8, 3, "APH", null,null,null,null,null,null],
[9, 3, "APH", null,null,null,null,null,null],
[10, 4, "APH", null,null,null,null,null,null],
[11, 3, "APH", null,null,null,null,null,null],
[1, null,null, 4,"tooltip info about product 1", null,null,null,null],
[2, null,null, 2,"tooltip info about product 1", null,null,null,null],
[3, null,null, -1,"tooltip info about product 1", null,null,null,null],
[4, null,null, 4,"tooltip info about product 1", null,null,null,null],
[5, null,null, 0,"tooltip info about product 1", null,null,null,null],
[6, null,null, 2,"tooltip info about product 1", null,null,null,null],
[7, null,null, -2,"tooltip info about product 1", null,null,null,null],
[8, null,null, -3,"tooltip info about product 1", null,null,null,null],
[9, null,null, -3,"tooltip info about product 1", null,null,null,null],
[10, null,null, -4,"tooltip info about product 1", null,null,null,null],
[11, null,null, 4,"tooltip info about product 1", null,null,null,null],
[1, null,null,null,null, 0,"tooltip info about product 1", null,null],
[2, null,null,null,null, 1,"tooltip info about product 1", null,null],
[3, null,null,null,null, 2,"tooltip info about product 1", null,null],
[4, null,null,null,null, 4,"tooltip info about product 1", null,null],
[5, null,null,null,null, -4,"tooltip info about product 1", null,null],
[6, null,null,null,null, 1,"tooltip info about product 1", null,null],
[7, null,null,null,null, -1,"tooltip info about product 1", null,null],
[8, null,null,null,null, 0,"tooltip info about product 1", null,null],
[9, null,null,null,null, 0,"tooltip info about product 1", null,null],
[10, null,null,null,null, 1,"tooltip info about product 1", null,null],
[11, null,null,null,null, 0,"tooltip info about product 1", null,null],
[1, null,null,null,null,null,null, 1,"tooltip info about product 1" ],
[2, null,null,null,null,null,null, 1,"tooltip info about product 1" ],
[3, null,null,null,null,null,null, 1,"tooltip info about product 1" ],
[4, null,null,null,null,null,null, 4,"tooltip info about product 1" ],
[5, null,null,null,null,null,null, -4,"tooltip info about product 1" ],
[6, null,null,null,null,null,null, -2,"tooltip info about product 1" ],
[7, null,null,null,null,null,null, -3,"tooltip info about product 1" ],
[8, null,null,null,null,null,null, -2,"tooltip info about product 1" ],
[9, null,null,null,null,null,null, -3,"tooltip info about product 1" ],
[10, null,null,null,null,null,null, -4,"tooltip info about product 1" ],
[11, null,null,null,null,null,null, 3,"tooltip info about product 1" ]
]);
var options = {
pointSize: 5,
width: 1000,
height: 400,
curveType: 'function',
vAxis: {
viewWindow:{
max:5,
min:-5
},
gridlines: { count: 11, color: '#CCC' }
},
chartArea: {width: '60%'},
hAxis: {
title: "Nanas",
gridlines: { count: 11, color: '#CCC' }
,slantedTextAngle:90 ,textStyle: {fontSize: 13}
}
}
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
var view = new google.visualization.DataView(data);
chart.draw(view, options);
}
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="chart_div"></div>
<div id="creativeCommons" style="text-align: center; width: 400px;">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Code to turn on or off data series by clicking on legend entries</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Andrew Gallant</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
</div>
</body>
</html>
我不久前看过这篇文章，并使用了 asgallant 的基本代码（顺便说一下谢谢）。尽管如此，我还是找到了另一种更容易实现的解决方案，因为我创建了一个实用程序类来处理整个过程（我正在使用一个小技巧来避免更改 Graph 数据，一切都是显示样式的问题。我没有长宁 calc（） 函数来处理线条绘制，我只是在系列上应用 0 lineWidth 样式。
column.lineWidth = 0;
代码可以在这里找到： http://jsfiddle.net/w9b1eyxy/58/
希望这可以在不久的将来有所帮助。