我正在试用谷歌图表的样本。以下是我实施的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
chart3();
}
function chart3() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Date');
dataTable.addColumn('number', '7522819-A-123');
dataTable.addColumn('number', '7523098-L-352');
dataTable.addColumn('number', '7522819-A-138');
dataTable.addColumn('number', '7522819-A-186');
dataTable.addColumn('number', '7522819-L-107');
dataTable.addRows([
['6-Apr-15', 5.994, 4.451, .2, 4.555, 3.728],
['7-Apr-15',6.217, 3.351, 5.142, 5.992, 3.662],
['8-Apr-15', 6.48, 3.603, 3.916, 5.256, 5.092],
['9-Apr-15', 6.24, 4.816, 3.948, 5.149, 5.838],
['10-Apr-15', 5.397, 4.465, 4.273, 6.252, 6.302],
['11-Apr-15', 5.995, 5.797, 6.022, 4.358, 3.890],
['12-Apr-15', 6.335, 7.2, 4.263, 5.772, 5.206]
]);
var options = {
legend: { textStyle: {fontSize: 9}},
title:'Machine Utilization Comparison (last 7 days)',
titleTextStyle: {fontSize: 15},
vAxis: {title: 'Usage (Hours)'},
hAxis: {
slantedText:true,
slantedTextAngle:30
} ,
pointSize: 5
};
var chart = new google.visualization.LineChart(document.getElementById('chart3'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<table>
<tr>
<td>
<div id="chart3" style="width: 620px; height: 300px;"></div>
<div id="days" style="position: relative; left:40px; width: 70%;top: 40px;" >
<table cellpadding="0" style="width:100%; left:0px; border-collapse:collapse;font-size:70%;color:black;">
<tr align="left">
<td><input id="day1" type="checkbox" value="1" class="days" />1</td>
<td><input id="day2" type="checkbox" value="2" class="days" />2</td>
<td><input id="day3" type="checkbox" value="3" class="days" />3</td>
<td><input id="day4" type="checkbox" value="4" class="days" />4</td>
<td><input id="day5" type="checkbox" value="5" class="days" />5</td>
<td><input id="day6" type="checkbox" value="6" class="days" />6</td>
<td><input id="day7" type="checkbox" value="7" class="days" />7</td>
<td><input id="day8" type="checkbox" value="8" class="days" />8</td>
<td><input id="day9" type="checkbox" value="9" class="days" />9</td>
<td><input id="day10" type="checkbox" value="10" class="days" />10</td>
<td><input id="day11" type="checkbox" value="11" class="days" />11</td>
<td><input id="day12" type="checkbox" value="12" class="days" />12</td>
<td><input id="day13" type="checkbox" value="13" class="days" />13</td>
<td><input id="day14" type="checkbox" value="14" class="days" />14</td>
<td><input id="day15" type="checkbox" value="15" class="days" />15</td>
<td><input id="day16" type="checkbox" value="16" class="days" />16</td>
<td><input id="day17" type="checkbox" value="17" class="days" />17</td>
<td><input id="day18" type="checkbox" value="18" class="days" />18</td>
<td><input id="day19" type="checkbox" value="19" class="days" />19</td>
<td><input id="day20" type="checkbox" value="20" class="days" />20</td>
<td><input id="day21" type="checkbox" value="21" class="days" />21</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
我想要的是当用户选择checkbox1时,折线图第一列的颜色应该变为灰色。如果用户选择checkbox2就好了,那么第2列的颜色应该变为灰色等等。
我无法做到这一点。需要帮助。
提前致谢。