highchart mysql json，带有下拉选择值的where条件答案

【问题标题】：highchart mysql json with dropdown select value for where conditionhighchart mysql json，带有下拉选择值的where条件
【发布时间】：2014-12-07 21:58:23
【问题描述】：

我正在尝试使用 mysql 表中的 json 数据来使用 highcharts。我想设置一个下拉列表，其中的值将用作 mysql_query 的 WHERE 条件以获取所选数据并将它们填充到 highchart 中。代码在静态条件下正常工作（没有下拉变量）。

main.html

<form method="get" action="" >
Chose :
<select name="liste" id="liste">
<option value="A" <? if($selected == 'A'){ echo 'selected="Choice A"';}?>Choice A</option>
<option value="B" <? if($selected == 'B'){ echo 'selected="Choice B"';}?>Choice B</option>
<option value="C" <? if($selected == 'C'){ echo 'selected="Choice C"';} ?>Choice C</option>
<option value="D" <? if($selected == 'D'){ echo 'selected="Choice D"';} ?>Choice D</option>
</select>
<input type="submit" value="Go" />
</form>

数据.php

`<?php

$A=$_GET['liste'];

$con = mysql_connect("localhost","myuser","mypwd");

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

mysql_select_db("mydatabase", $con);

$test = mysql_query("SELECT name FROM table1 WHERE table2.age LIKE '{$A}'");

$rowss = array();
while($rr = mysql_fetch_array($test)) { 
$ro[0] = $rr[0];
$ro[1] = $rr[1];
array_push($rowss,$ro); 
}

 print json_encode($rowss, JSON_NUMERIC_CHECK);

 mysql_close($con);
?>

在 main.html 文件中，我有调用 data.php 文件以获取 json 数据的 highchart 脚本。

<script>
     $(document).ready(function() {
  //rest of the code
 $.getJSON("data.php", function(json) {
            options.series[0].data = json;
            chart = new Highcharts.Chart(options);
        });
</script>

测试 data.php 根据选择的值给出正确的输出。所以我假设它工作正常。我的问题是在加载 main.html 时它会绘制一个空图，即使更改值时也会继续绘制空数据图。

注意：我知道 mysql_* 不再是最佳实践，并计划稍后切换到 mysqli_*。

编辑：似乎我的 options.series[0] 选项 obj 没有创建，控制台显示空数据数组。使用 <form method="get" action="data.php" > 时，我得到了期望数组，但无法获取图表。

【问题讨论】：

options.series[0] 你的选项 obj 已经创建了吗？你也试过 $.ajax 而不是 getJSON 吗？控制台是否有任何错误消息？
$.ajax( url: data.php, data: queryOptions, dataType: 'json', success:function(json) { options.series[0].data = json; chart = new Highcharts.Chart(options); }); 对吗？不知道怎么用ajax！！
我建议您从您的选择中删除 php 代码，然后通过 jquery 捕获事件（更改函数）。在此操作中调用 ajax，然后通过 series.update / series.setData 更新您的图表
我从选择中删除了 php 代码。我认为当 action="" 时变量不会发送到 data.php。

标签： javascript php mysql json highcharts

【解决方案1】：

我试试这个查询，它给出了完美的图表。

      for (var i=0; i<data.value.length; i++)
     {
     **series**.push({
                    name: data.value[i].name,
                    data:data.value[i].value
                });
      }


        var chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'graph_view',
                    defaultSeriesType: 'spline',
                    marginRight: 0,
                    marginBottom: 25
                },
                credits: {
            text: '',
            href: ''
            },
                title: {
                    text: '',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: data.orderDate,
                yAxis: {
                    title: {
                        text: ''
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                legend: {

                    align: 'top',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },

                series:**series**


            });

          }
       });
    }
 }

【讨论】：

这不是答案请在评论部分提出问题
是的，我检查了 php.data 文件并正确显示了数据...我通过将表单中的操作设置为 <form method="get" action="" >，它确实提供了正确的数组。
再次检查我的答案。
@Pankaj Monga：谢谢，但我正在尝试其他方法。我正在使用查询从 mysql 获取数据并将其保存为 json，然后使用来自 json 的这组数据。它提供了完美的图表，但是当我尝试使用下拉菜单中的变量时，它对我不起作用。

【解决方案2】：

我根据以下example得到了我想要的作品 main.html：

<select name="list" id="list">
<option value="A">Choice A</option>
<option value="B">Choice B</option>
<option value="C">Choice C</option>
<option value="D">Choice D</option>
</select>

<script>
 $(function () {

  //on page load  
 getAjaxData("A");

 //on changing select option
 $('#list').change(function(){
 var val = $('#list').val();
 getAjaxData(val);
 });

 function getAjaxData(id){
 //use getJSON to get the dynamic data via AJAX call
 $.getJSON('data.php', {id: id}, function(chartData) {
 .....rest of the code

和data.php：

 <?php

 $con = mysql_connect("localhost","myuser","mypwd");

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

 mysql_select_db("mydatabase", $con);

 $id = $_GET['id'];

 $test = mysql_query("SELECT name FROM table1 WHERE table2.age LIKE '{$id}'");

 $rowss = array();
  while($rr = mysql_fetch_array($test)) { 
  $ro[0] = $rr[0];
  $ro[1] = $rr[1];
 array_push($rowss,$ro); 
 }

 print json_encode($rowss, JSON_NUMERIC_CHECK);

  mysql_close($con);
 ?>

好好享受吧！

【讨论】：