通过引用此Question ，我能够获得以下代码 工作，但我很难改变工具提示
所以我一直在努力使工具提示起作用并让它工作但是我很难让两者都工作
谢谢！
代码示例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>
答案 0 :(得分：0)
我刚刚看过这篇文章，并使用了asgallant的基本代码（顺便说一下）。然而，我找到了另一种解决方案，它可以更容易实现，因为我创建了一个实用程序类来处理整个过程（我使用一个小技巧来避免更改Graph数据，所有都是显示样式的问题。而不是改变calc（）函数处理线条图，我只在系列上应用0 lineWidth样式。
column.lineWidth = 0;
可以在此处找到代码：http://jsfiddle.net/w9b1eyxy/58/
希望这可以在不久的将来发挥作用。