Question

在PHP页面中，我正在使用tablesorter创建一个表，以显示和隐藏子行。单击表中的一行时，子行将显示来自Google图表的图表。

有效项目：

表行单击以显示子行
显示第一个图表的表
该值的正确数据显示在图表中

项目不起作用：

Google图表会更改选中的下一行中显示的数据，当单击该行时，应该在其中显示表格的空白区域。

创建表并在其中填充数据的PHP代码（来自sql db）：

if( isset($db_graph_query)){
    while($row = mysqli_fetch_array($db_graph_query)) {
        $rowcount2++;
        // removed the hard coded column set and made it driven off of the array below
        // could have pulled it from the $cols array above, but there might be columns that we don't wish to show
        echo "                                <tr>";
        $colindex = 0;
        foreach( $cols as $column_name ) {
            $style = "";
            $val = $row[$column_name];
            if ( isset($column_callback)) {
                $style=$column_callback($colindex, $val);
            }
            if($colindex == 0){ //make the first cell our toggle for child row
                echo "<td $style><a href='#' class='toggle' onClick='drawChart(\"$val\");'>$val</a></td>";
            } else {
                echo "<td $style>$val</td>";
            }
            $colindex++;
        }
        echo "</tr>";
        echo "<tr class='tablesorter-childRow'>";
            echo "<td colspan='4'>";
                echo "<div id='chart_div' style='width: 1000px; height: 600px'></div>";
            echo "</td>";
        echo "</tr>";
    }
}

使用JavaScript创建我的图表：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    function drawChart(name) {
        var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('string', 'Date');
            data.addColumn('number', 'Runs');
            data.addColumn('number', 'Fail');
            data.addRows([
                <?php
                    $dbName = "my_db";
                    $config = parse_ini_file("db_info.ini",true);
                    $dbUser = $config["DB"]["db_user"];
                    $dbServer = $config["DB"]["db_ip"];
                    $dbPassword = $config["DB"]["db_pass"];

                    $con = mysql_connect($dbServer, $dbUser, $dbPassword);

                    if (!$con) {
                        die('Could not connect: ' . mysql_error());
                    }

                    mysql_select_db($dbName, $con);
                    $sql = mysql_query("SELECT * FROM mytable");

                    $output = array();

                    while($row = mysql_fetch_array($sql)) {
                        // create a temp array to hold the data
                        $temp = array();

                        // add the data
                        $temp[] = '"' . $row['Name'] . '"';
                        $temp[] = '"' . $row['Date'] . '"';
                        $temp[] = (int) $row['Runs'];
                        $temp[] = (int) $row['Fails'];
                        // implode the temp array into a comma-separated list and add to the output array
                        $output[] = '[' . implode(', ', $temp) . ']';
                    }
                    // implode the output into a comma-newline separated list and echo
                    echo implode(",\n", $output);

                    mysql_close($con);
                ?>
        ]);
        var view = new google.visualization.DataView(data);
        view.setRows(data.getFilteredRows([
            {column: 0, value: name} //I want this to be the value changed on row selection
        ]));
        view.setColumns([1,2,3]);

            var options = {
                hAxis: { 'title': 'Date' },
                width: 1000,
                height: 600,
                curveType: 'function',
                crosshair: { trigger: 'both'}
            };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(view, options);
    }

</script>

输出（“名称”，“日期”，“运行时间”，“失败”是列，由于某种原因，我在中间的文本重新排列）：

Answer 1

我意识到的是，由于图表没有每个容器的唯一标识符，因此图表在第一个chart_div内部相互堆叠。因此，从那里我刚刚修改了子行的php，如下所示：

原文：

  public Photo updateStatus(Photo photo, String status) throws Exception {

 RestTemplate restTemplate = new RestTemplate();

         HttpHeaders headers = new HttpHeaders();
         headers.setAccept(Arrays.asList(MediaType.APPLICATION_JSON));
         headers.setContentType(MediaType.APPLICATION_JSON);
         headers.set("X-Auth-Token", accessToken);

    Photo newPhoto = photo;
    newPhoto.setStatus(status);

    ResponseEntity<Photo> response = restTemplate.exchange(apiUrl+ "/photos/" + photo.getId(),
            HttpMethod.PUT,
            new HttpEntity<Photo>(headers),
            new ParameterizedTypeReference<Photo>() {},
           newPhoto);
 return response.getBody();
 }

新功能和改进功能

echo "<tr class='tablesorter-childRow'>";
        echo "<td colspan='4'>";
            echo "<div id='chart_div' style='width: 1000px; height: 600px'></div>";
        echo "</td>";
    echo "</tr>";

Google图表-图表在选择时不会更改

1 个答案: