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

正如许多评论正确指出的那样，您应该首先重新考虑数据加载的方法。从客户端传递SQL查询是一件麻烦事。您是否能够正确清理查询以防范恶意代码？你无法确定。

将数据库访问层移动到PHP更合理。您可以传递在服务器上运行的PHP脚本所需的参数，以确定需要从DB加载的内容以及构造和执行实际的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

不要在ajax循环内进行for次调用。这对服务器来说是一种负担。您拨打的电话越少，您ui的响应速度就越快。因此，实现所需内容的更好方法是在一次ajax调用和success调用中获取所有图表的所有数据，以便使用AmCharts.makeChart遍历构建图表的数据。

javascript - for循环生成图表（amchart）

更新代码

2 个答案: