javascript - 带有图表的数据表查询

我有一个问题让我困扰了一段时间。我想知道是否有可能将数据从数据表查询流到图表。让我详细说明(我希望..)假设我在左侧有“水果”的数据表，在右侧有图表，数据表中的数据相同，显示了水果的数量和类型

我们这样说:


所以，我的问题是这个。当我查询数据表中的数据时，是否有可能在右侧的图形中显示相同的查询。 (例如，我正在搜索“苹果”，并且由于我的表格仅过滤了苹果结果，因此我也希望在图形上显示相同的结果)

您无需提供任何代码，但是可以提供一些说明，链接或说明。谢谢

我只想指出我正在使用PHP和MySQL。带有Google和Morris图表库。

这是使用PHP的莫里斯图表的示例

<div id="tipLampe"></div>
<?php
   try {
       $db = connectPDO();
       $row = $db->prepare("SELECT tip_lampe,count(tip_lampe) as broj FROM v_rasvjeta GROUP BY tip_lampe");
       $row->execute();
       $json_data=array();
       foreach($row as $rec)
       {
           $json_array['label']=$rec['tip_lampe'];
           $json_array['value']=$rec['broj'];
           array_push($json_data,$json_array);
       }
   ?>
<script type="application/javascript">
   Morris.Donut({
     element: 'tipLampe',
     data: <?php echo json_encode($json_data,JSON_UNESCAPED_UNICODE)?>
     });
</script>
<?php
   closePDO($db);
   } catch (PDOException $e) {
   showPDOErrors($e, $db);
   }
   ?>

最佳答案

是，可以轻松实现。

从键入(就像自动完成)时更新数据表开始

查询数据库并将该result set绑定(bind)到table(在左侧)

并在您的result set上应用相同的chart(在右侧)

详细信息:

在php中创建一条路由，即/getlist?q=apple以将用户输入作为查询参数

以JSON格式从服务器返回正确格式的数据

当用户键入textbox

时，使用ajax调用路由

启动它，如果卡住，请回来。但是至少尝试一下!