1

我正在尝试谷歌图表的样本。下面是我实现的代码：

    <!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 列的颜色应变为灰色，依此类推。

我无法做到这一点。需要帮忙。

提前致谢。

4

0 回答 0