Question

我一直试图以不同的方式解决这个问题，但是没有让它按预期工作，我觉得这不是什么大问题（我真的希望如此）但是我对Ajax和jQuery的经验和技巧都很友好有限的，这就是为什么我吸引你的专业知识！

我正在制作类似于http://www.jqplot.com/tests/data-renderers.php的图表。但在我的情况下，生成json文件取决于用户从选择框中选择的值。我正在使用2个文件和ajax调用来完成此任务：

-AnnualB.html 是选择框所在的文件，应显示图表。

-Index.php 是对数据库进行查询的文件（使用从AnnualB.html中的selectbox获取的值）并生成json数组。

在AnnualB.html中，我使用GET方法从selectbox中检索值并将其发送到Index.php，后者生成json数据。根据json数据，图表必须在AnnualB中创建......这就是我的问题所在。生成图表的功能工作正常，发送选择值并返回json的调用也正常工作（已经使用Firebug进行了检查），但我知道遗漏了一些东西（但不知道还有什么）因为我不知道设法将json数据传递给生成图表的函数。

我在AnnualB.html中的代码是这样的（用......来缩写一些不相关的信息）：

生成图表的功能 （如果传递了json数据，则工作正常）

function CreateGraph() { 
 $(document).ready(function(){
var ajaxDataRenderer = function(url, plot) {
    var ret = null;
    $.ajax({
        async: false,
        url: url,
        dataType:'json',
        success: function(data) {
            ret = data; }
    });
   return ret; };
$.jqplot.config.enablePlugins = true;
var jsonurl = "./index.php";
var plotData = ajaxDataRenderer(jsonurl); 
var series = ...
plot1 = $.jqplot('Chart1', series,{...}}

Ajax Call （可能是我的错误/遗漏在哪里）

function LoadGraph(int)
{
if (window.XMLHttpRequest)
  {xmlhttp=new XMLHttpRequest();}
else
  {xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.open("GET","index.php?tasel="+int,true);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
  {
    CreateGraph(int)
    }
}

选择框

<select name="tasel" size="1" onchange="LoadGraph(this.value)">
<option value="">Select accounts type:</option>
  <option value="3">Tuloslaskelma</option>
  <option value="2">Tasevastattava</option>
  <option value="1">Tasevastaava</option>
</select>

Index.php中的相关代码如下所示（当选择框（tasel）的值通过时工作正常））：

$tasel = $_REQUEST['tasel'];
if ($tasel == ...2)
{...}
.
.
.
echo "[",$selite, ",";// These 2 variables create the json array
echo $finaljson, "]";

提前感谢您的耐心和帮助！

Answer 1

我意识到这个问题的答案比我想象的要简单。我不需要进行整个function LoadGraph(int) ajax调用，而只需调用函数中的tasel值?tasel="+int来生成这样的图表（已经在进行ajax调用）：

function CreateGraph() { 
    $(document).ready(function(){
        var ajaxDataRenderer = function(url, plot) {
            var ret = null;
            $.ajax({
                async: false,
                url: url,
                dataType:'json',
                success: function(data) {
                    ret = data; 
                }
            });
            return ret; 
        };

    $.jqplot.config.enablePlugins = true;
    var jsonurl = "./index.php?tasel="+int;
    var plotData = ajaxDataRenderer(jsonurl); 
    var series = ...
    plot1 = $.jqplot('Chart1', series,{...}
}

Answer 2

var plot1 = undefined;
var plotOptions = undefined;

function CreateGraph() { 
    $.ajax({
        async: false,
        url: "./index.php",
        dataType:'json',
        success: function(data) {
            var series = fn... // Convert your json Data to array
            if(plot1 != undefined)
            {
                plot1.destroy();
            }
            plot1 = $.jqplot('Chart1', series, plotOptions);
        }
    });
}

$(function(){
    $.jqplot.config.enablePlugins = true;
    plotOptions = {...}; // jqPlot options
    CreateGraph();
});

希望这可以帮到你......

使用ajax重新绘制JQplot图表

2 个答案: