javascript - 用于生成图表的 for 循环 (amchart)

Question

我正在尝试使用下面的代码一次生成多个折线图。但是，它不起作用。使用 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();
            }
        });
    }

更新代码

        <script type="text/javascript">

            var chartNameList = ['chart1','chart2'];
            var divId = ['plot1','plot2'];
            var configList = ['chartConfig1','chartConfig2'];
            var dbQuery = [];

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

             dbQuery[0] = <?php echo json_encode($db_query_1) ?>;
             dbQuery[1] = <?php echo json_encode($db_query_2) ?>;

            /* chart initialization */
            for(var i =0; i < 2; i += 1)   {
                //window["chart"+i] = createChartObj(divId[i],configList[i]);
                execDbQuery(divId[i],configList[i],dbQuery[i],chartNameList[i]);
            }
        </script>

/**
 * Execute of DB query
 */

function execDbQuery(divId, configObj, dbQuery, chartObj) {
    chartObj = AmCharts.makeChart(divId, configObj);
    $.ajax({
        type: 'POST',
        url: "query_db.php",
        data: {'db_que': dbQuery},
        dataType: 'json',
        context: document.body,
        global: false,
        async:  true,
        success: function(data) {
            //alert(data);
            chartObj.dataProvider = data;
            chartObj.validateNow();
        }
    });
} 

Answer 1

正如许多 cmets 正确指出的那样，您可能应该从重新考虑您的数据加载方法开始。从客户端传入 SQL 查询是自找麻烦。您能否正确清理查询以防范恶意代码？你不能确定。

将数据库访问层移至 PHP 更为合理。您可以传入在服务器上运行的 PHP 脚本所需的参数，以识别需要从数据库加载的内容并构建和执行实际的 SQL 查询。

即：query_db.php?chart_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();

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

请注意，上述代码未经现场测试，仅作为您自己实施的指导点。

Answer 2

不要在for 循环内调用ajax。这是服务器的负担。您拨打的电话越少，您的ui 的响应速度就越快。因此，实现您想要的更好的方法是在一个 ajax 调用中获取所有图形的所有数据，然后在 success 上迭代使用 AmCharts.makeChart 构建图形的数据。