JavaScript的 - for循环生成图表（amchart） [英] javascript - for loop to generate charts (amchart)
问题描述
我试图生成一气呵成使用下面的code多线走势图。然而，它不工作。什么是生成图表使用了/而或任何其他循环机制的最好方法是什么？我有很多的图表生成。
VAR db_query =阵列（）;
db_query [1] =＆LT;？PHP的回声json_en code（$ db_query_1）取代;
db_query [2] =＆LT;？PHP的回声json_en code（$ db_query_2）取代;
VAR chartConfig1 =克隆（chartConfigLineOne）;
VAR chartConfig2 =克隆（chartConfigLineOne）;
对于（VAR I = 1，LEN = 2; I＆LT; = LEN;我++）{
/ *图表初始化* /
VAR chart_num =图表+ i.toString（）;
VAR plot_num =暗算+ i.toString（）;
变种chartConfig_num =chartConfig+ i.toString（）;
/ *警报（chart_num）;
警报（plot_num）;
警报（chartConfig_num）; * /
chart_num = AmCharts.makeChart（plot_num，chartConfig_num）;
$阿贾克斯（{
键入：POST，
网址：query_db.php
数据：{'db_que'：db_query [I]}，
数据类型：JSON，
背景：document.body的，
全球：假的，
异步：真正的，
成功：功能（数据）{
//警报（数据）;
chart_num.dataProvider =数据;
chart_num.validateNow（）;
}
}）;
}
修订code
＆LT;脚本类型=文/ JavaScript的＆GT;
变种chartNameList = ['Chart1的'，'chart2'];
变种DIVID = ['plot1'，'plot2'];
变种configList = ['chartConfig1'，'chartConfig2'];
VAR的DBQuery = [];
VAR chartConfig1 =克隆（chartConfigLineOne）;
VAR chartConfig2 =克隆（chartConfigLineOne）;
的DBQuery [0] =＆LT;？PHP的回声json_en code（$ db_query_1）取代;
的DBQuery [1] =＆LT;？PHP的回声json_en code（$ db_query_2）取代;
/ *图表初始化* /
为（变种I = 0; I＆2; I + = 1）{
//窗口[图表+ i] = createChartObj（DIVID [我]，configList [I]）;
execDbQuery（DIVID [I]，configList [I]，的DBQuery [I]，chartNameList [I]）;
}
＆LT; / SCRIPT＆GT;
/ **
*执行数据库查询
* /
功能execDbQuery（DIVID，configObj，的DBQuery，chartObj）{
chartObj = AmCharts.makeChart（DIVID，configObj）;
$阿贾克斯（{
键入：POST，
网址：query_db.php
数据：{db_que：的DBQuery}，
数据类型：JSON，
背景：document.body的，
全球：假的，
异步：真正的，
成功：功能（数据）{
//警报（数据）;
chartObj.dataProvider =数据;
chartObj.validateNow（）;
}
}）;
}
正如许多评论正确地指出，你应该开始重新思考的方法给数据加载。传递SQL查询从客户端是自找麻烦。您将能够正确地净化你的查询，以防范恶意code？你不能确定。
这是更为合理的数据库访问层转移到PHP。您可以通过在所需的服务器上运行PHP脚本，以确定哪些需要从数据库加载并构建和执行实际的SQL查询参数。
即： query_db.php？chart_id = 5
这将是弥补PHP脚本来决定该怎么做。假设您目前使用PHP来格式化这些SQL查询，我简直不能像它可以是一个问题。
这给我们带来了另一个问题。您当前的安装程序将同时运行多个AJAX请求。虽然这是在您发布的例子有两个可能的图表确定，它可以如果你有，比如说，30图表需要加载数据，陷入瘫痪的表现。
的解决方案将是，以菊花链的加载。不要启动加载另一个图表中，直到previous之一结束加载。即：
VAR图表= [{
名：Chart1的，
格：plot1
配置：克隆（chartConfigLineOne）
查询：其中;? PHP的回声json_en code（$ db_query_1）＆GT？;
}，{
名：chart2
格：plot2
配置：克隆（chartConfigLineOne）
查询：其中;? PHP的回声json_en code（$ db_query_2）＆GT？;
}];
//做任何修改，每个图表的配置，你需要在这里
// ...
//函数创建图表
功能processNextChart（）{
如果（charts.length）{
变种图表= charts.shift（）;
$阿贾克斯（{
键入：POST，
网址：query_db.php
数据： {
db_que：chart.query
}，
数据类型：JSON，
背景：document.body的，
全球：假的，
异步：真正的，
成功：功能（数据）{
chart.config.dataProvider =数据;
chartObj = AmCharts.makeChart（chart.div，chart.config）;
的setTimeout（processNextChart，100）;
}
}）;
}
}
//处理第一个图表
processNextChart（）;
请注意我是如何简化你的整个图表阵列，单个阵列保存所有适用的数据。
请注意，上面的code不带电测试，其目的是作为指导点自己的实现。
Am trying to generate multiple line charts at one go using the code below. However, it isn't working. What would be the best way to generate graphs using a for/while or any other looping mechanism? I have many charts to generate.
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();
}
});
}
UPDATED CODE
<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();
}
});
}
As many comments correctly pointed out, you should probably start with rethinking your approach to data loading. Passing SQL queries in from client-side is asking for trouble. Will you be able to properly sanitize your queries to guard against malicious code? You can't be sure.
It's far more reasonable to move your DB access layer to PHP. You can pass in parameters needed for PHP script running on server to identify what needs to be loaded from DB and construct and execute actual SQL queries.
I.e.: query_db.php?chart_id=5
It would be up for PHP script to determine what to do. Given that you're currently using PHP to format those SQL queries, I can hardly image it can be a problem.
This brings us to another issue. Your current setup will run multiple AJAX requests simultaneously. While it's probably OK in the example you posted which has two charts, it can bog down the performance if you you have, say, 30 charts you need to load data for.
The solution would be to daisy-chain the loading. Do not start loading of another chart, until the previous one finishes loading. I.e.:
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();
Please note how I simplified your whole chart array with a single array that holds all applicable data.
Please note, that the above code is not live-tested and is meant as a guiding point for your own implementation.
这篇关于JavaScript的 - for循环生成图表（amchart）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
