javascript-用于生成图表的循环（amchart）

我正在尝试使用下面的代码一次生成多个折线图。然而，它不起作用。使用for/while或任何其他循环机制生成图形的最佳方法是什么？我有很多图表要生成

   var db_query = Array();
    db_query[1] = <?php echo json_encode($db_query_1) ?>;
    db_query[2] = <?php echo json_encode($db_query_2) ?>;

    var chartConfig1 = clone(chartConfigLineOne);
    var chartConfig2 = clone(chartConfigLineOne);

    for(var i=1, len=2; i <= len; i++) {
        /* chart initialization */
        var chart_num = "chart" + i.toString();
        var plot_num =  "plot" + i.toString();
        var chartConfig_num = "chartConfig" + i.toString();
        /*alert(chart_num);
        alert(plot_num);
        alert(chartConfig_num);*/
        chart_num = AmCharts.makeChart(plot_num, chartConfig_num);

        $.ajax({
            type: 'POST',
            url: "query_db.php",
            data: {'db_que': db_query[i]},
            dataType: 'json',
            context: document.body,
            global: false,
            async:  true,
            success: function(data) {
                //alert(data);
                chart_num.dataProvider = data;
                chart_num.validateNow();
            }
        });
    }

var db_query=Array（）；
db_查询[1]=；
db_查询[2]=；
var chartConfig1=克隆（chartConfigLineOne）；
var chartConfig2=克隆（chartConfigLineOne）；
对于（var i=1，len=2；i；
/*图表初始化*/
对于（变量i=0；i<2；i+=1）{
//窗口[“图表”+i]=createChartObj（divId[i]，configList[i]）；
execDbQuery（divId[i]、configList[i]、dbQuery[i]、chartNameList[i]）；
}
/**
*数据库查询的执行
*/
函数execDbQuery（divId、configObj、dbQuery、chartObj）{
chartObj=AmCharts.makeChart（divId，configObj）；
$.ajax({
键入：“POST”，
url:“query_db.php”，
数据：{'db_que'：dbQuery}，
数据类型：“json”，
上下文：document.body，
全球：错，
async:true，
成功：功能（数据）{
//警报（数据）；
chartObj.dataProvider=数据；
chartObj.validateNow（）；
}
});
} 

不要在

for

循环中进行

ajax

调用。这对服务器来说是一个负担。调用越少，您的

ui

响应越快。因此，更好的实现方法是在一次

ajax

调用中获取所有图形的所有数据，然后在

成功

中迭代数据构建g使用AmCharts.makeChart创建图表正如许多评论正确指出的那样，您可能应该从重新思考数据加载方法开始。从客户端传入SQL查询会带来麻烦。您是否能够正确清理查询以防范恶意代码？您不能确定

将DB访问层移动到PHP更为合理。您可以传入在服务器上运行的PHP脚本所需的参数，以确定需要从DB加载什么，并构造和执行实际的SQL查询

例如：

query\u db.php？chart\u id=5

这将由PHP脚本决定要做什么。鉴于您目前正在使用PHP格式化这些SQL查询，我很难想象这会是一个问题

这给我们带来了另一个问题。您当前的设置将同时运行多个AJAX请求。虽然您发布的示例中有两个图表可能没有问题，但如果您有（比如）30个图表需要为其加载数据，则可能会影响性能

解决方案是菊花链加载。在前一张图表完成加载之前，不要开始加载另一张图表。即：

var charts = [ {
  "name": "chart1",
  "div": "plot1",
  "config": clone( chartConfigLineOne ),
  "query": <? php echo json_encode( $db_query_1 ) ?>
}, {
  "name": "chart2",
  "div": "plot2",
  "config": clone( chartConfigLineOne ),
  "query": <? php echo json_encode( $db_query_2 ) ?>
} ];

// do whatever modifications to each chart's config you need here
// ...

// function that creates the chart
function processNextChart() {
  if ( charts.length ) {
    var chart = charts.shift();
    $.ajax( {
      type: 'POST',
      url: "query_db.php",
      data: {
        'db_que': chart.query
      },
      dataType: 'json',
      context: document.body,
      global: false,
      async: true,
      success: function( data ) {
        chart.config.dataProvider = data;
        chartObj = AmCharts.makeChart( chart.div, chart.config );
        setTimeout( processNextChart, 100 );
      }
    } );
  }
}

// process first chart
processNextChart();

var图表=[{
“名称”：“图表1”，
“div”：“plot1”，
“配置”：克隆（chartConfigLineOne），
“查询”：
}, {
“名称”：“图表2”，
“div”：“plot2”，
“配置”：克隆（chartConfigLineOne），
“查询”：
} ];
//在此处对每个图表的配置进行所需的任何修改
// ...
//创建图表的函数
函数processNextChart（）{
如果（图表长度）{
var chart=charts.shift（）；
$.ajax（{
键入：“POST”，
url:“query_db.php”，
数据：{
“db_que”：chart.query
},
数据类型：“json”，
上下文：document.body，
全球：错，
async:true，
成功：功能（数据）{
chart.config.dataProvider=数据；
chartObj=AmCharts.makeChart（chart.div，chart.config）；
设置超时（processNextChart，100）；
}
} );
}
}
//过程优先图
processNextChart（）；

请注意，我是如何用一个包含所有适用数据的数组简化整个图表数组的

---

请注意，上面的代码没有经过现场测试，只是作为您自己实现的指导点。

不要将

JavaScript

与

PHP

混用，就像

db\u query[1]=；

。这太可怕了。试着不要使用多个

var a；var b；var c；

，而只使用

var a=123，b=345，…

。如果你不改变你的编程风格，总有一天你的代码会看起来像spagetti。而不是像

警报（数据）

那样使用

console.log（数据）

。你的编程风格在几年前就已经过时了。因此，你最好在

JavaScript

中阅读一些关于专业编程的书籍。你好，雅可比安-谢谢你的指导。我是一名编程新手。学习曲线肯定很陡峭。我能请你帮助我理解如何做我正在尝试的事情吗另外，如果您能快速向我介绍如何访问javascript内部的PHP数据或其他方法，那将非常有帮助。您已经知道如何访问

javascript内部的
PHP
数据。这实际上是
ajax
在您的示例中所做的。退一步，我有一个主要问题用户选择值的页面。然后单击提交，这些值将发布到动态构造SQL的PHP页面（接收数据和构建SQL查询发生在节之间。在这一节之后，我有一个javascript节，里面有ajax代码。因此，要访问PHP代码中构建的SQL，我使用db_query[1]=您能建议一种完全不同的方法吗？我很乐意按照您建议的方法实现它。不幸的是，SQL查询都是不同的（它们返回的列数不同）。这就是为什么我要循环：-（将此数据库逻辑移到服务器端。我的意思是，我有一堆SQL查询，我一个接一个地执行，并为每个查询结果绘制图表。SQL输出有不同的列数。例如，日期，第一个SQL的输出计数（a），日期，第二个SQL的计数（C），日期，名称，计数（F）对于第三个和更多的组合。我知道这与
var charts = [ {
  "name": "chart1",
  "div": "plot1",
  "config": clone( chartConfigLineOne ),
  "query": <? php echo json_encode( $db_query_1 ) ?>
}, {
  "name": "chart2",
  "div": "plot2",
  "config": clone( chartConfigLineOne ),
  "query": <? php echo json_encode( $db_query_2 ) ?>
} ];

// do whatever modifications to each chart's config you need here
// ...

// function that creates the chart
function processNextChart() {
  if ( charts.length ) {
    var chart = charts.shift();
    $.ajax( {
      type: 'POST',
      url: "query_db.php",
      data: {
        'db_que': chart.query
      },
      dataType: 'json',
      context: document.body,
      global: false,
      async: true,
      success: function( data ) {
        chart.config.dataProvider = data;
        chartObj = AmCharts.makeChart( chart.div, chart.config );
        setTimeout( processNextChart, 100 );
      }
    } );
  }
}

// process first chart
processNextChart();