javascript

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

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

Answer 2

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

将您的数据库访问层移至 PHP 更为合理。您可以在服务器上传递 PHP 脚本运行ning 所需的参数，以识别需要从数据库加载的内容并构造和执行实际的 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();

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

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

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

javascript - for loop to generate charts (amchart)

ajax

jquery

amcharts

更新代码