Question

我实际上正致力于一个可视化测量值的项目。我知道我能够可视化数据库中的所有值，但是可以进一步使用复选框，这样就可以更容易地选择用户想要查看的内容。我被困在如何使用户首先使用复选框，一个解决方案是，如果每个复选框和它们在一起，如果一个或多个被检查，可以制作许多。

我需要帮助的事情：

让用户有机会从复选框中选择他们想要查看的内容。
对数据进行过时和过时排序。

这是目标：

enter image description here

到目前为止我来了：

enter image description here

代码：

<?php
$con=mysql_connect("localhost","root","") or die("Failed to connect with database!!!!");
mysql_select_db("chart", $con);

$sth = mysql_query("SELECT * FROM googlechart");

$rows = array();
//flag is not needed
$flag = true;
$table = array();
$table['cols'] = array(

 // Labels for your chart, these represent the column titles
    // Note that one column is in "string" format and another one is in "number" format as pie chart only required "numbers" for calculating percentage and string will be used for column title
    array('label' => 'Time',    'type' => 'number'),
    array('label' => 'PH',      'type' => 'number'),
    array('label' => 'temperature','type' => 'number'), 
    array('label' => 'Chlorine','type' => 'number') );

    $rows = array();

while($r = mysql_fetch_assoc($sth)) {
     $temp = array();
        $temp[] = array('v' => (string) $r['Time']); 
        $temp[] = array('v' => (string) $r['PH']);
        $temp[] = array('v' => (string) $r['temperature']);
        $temp[] = array('v' => (string) $r['Chlorine']);

        $temp[] = array('v' => (int) $r['Time']); 
        $rows[] = array('c' => $temp);

}

 $table['rows'] = $rows;
 $jsonTable = json_encode($table);
 echo $jsonTable;   

?>


<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable(<?=$jsonTable?>);

        var options = {
        /*width: 900, height: 900, */
          title: 'Visualization',
          /* curveType: 'function', */
           legend: { position: 'bottom' },
           pointSize: 10,
        vAxis: {title: "Values", titleTextStyle: {italic: false}},
        hAxis: {title: "Time", titleTextStyle: {italic: false}},
        };

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


      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

PHPMYADMIN：

enter image description here

Answer 1

您始终可以使用removeColumn清理DataTable。你没有小提琴，也没有给出JSON的例子，所以这里有一些其他值的例子 - 但技术非常简单。

假设您有3行数据：Cats，blanket1和blanket2。然后为每个数据列实现复选框：

<input type="checkbox" id="cats" checked="checked">
<label for="cats">cats</label>
<input type="checkbox" id="blanket1" checked="checked">
<label for="blanket1">blanket2</label>
...

在drawChart方法中，检查每个复选框的已检查状态，如果不是，则删除相应的数据列：

//remember reverse order!
if (!blanket2.checked) data.removeColumn(3);    
if (!blanket1.checked) data.removeColumn(2)
...

反向顺序是nessecary，你必须先检查最后一列，然后检查倒数第二列，依此类推。

最后，为每个复选框指定一个点击处理程序，每次单击一个复选框时重绘图表：

cats.onchange = drawChart;
blanket1.onchange = drawChart;
...

参见演示 - ＆gt;的 http://jsfiddle.net/rJHtA/

当然 - 在你的情况下，我不会每次都毁掉原来的<?=$jsonTable?>。将原始<?=$jsonTable?>保存在全局变量中，并从该本地副本创建该图表。

要按日期（时间）订购数据，您必须重新加载页面或使用AJAX获取新的<?=$jsonTable?>。这不应该与列的显示/隐藏一起完成（不需要重新加载您已经拥有的数据）。由于您没有告诉日期是如何以（假设的）形式输入，您打算如何处理PHP甚至是表格中time的格式，因此无法提供具体示例。是字符串吗？我们不知道。但假设您在表单上有两个<input>，并且Date的类型为DATE：

<input type="text" name="from"> <input type="text" name="to">

然后在服务器上：

$SQL = 'SELECT * FROM googlechart '. 'WHERE `Date` BETWEEN "'.$_GET['from'].'" AND "'.$_GET['to'].'"'; $sth = mysql_query($SQL);

Google图表显示了表单输入的可视化

1 个答案: