Question

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

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>

data.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数据。

<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" >时，我得到了expect数组但无法得到图表。

Answer 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**


            });

          }
       });
    }
 }

Answer 2

我根据以下example得到了我想要的作品我必须进行ajax调用以设置变量on the drop of drop menu并且代码变为这样（删除表单标签和提交按钮） 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);
 ?>

享受它!!

highchart mysql json with dropdown select value for where condition

2 个答案: