使用 CanvasJS 图表在 js 中循环答案

【问题标题】：Loop in js with CanvasJS chart使用 CanvasJS 图表在 js 中循环
【发布时间】：2015-03-13 12:17:51
【问题描述】：

我有这段代码（JS + PHP）

        { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> },
        { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> },
        { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> },
        { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> },
        { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> },
        { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> },
        { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> },
        { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> },
        { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> },
        { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> },
        { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> },
        { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> },
        { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> },
        { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> },
        { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> },
        { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> },
        { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> },
        { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> },
        { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> },
        { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> },
        { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> },
        { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> }

所有行都是相等的，除了最后一行，这里没有“，”

我需要循环这段代码，但 for 循环不起作用，我试试这个，但不起作用：

for(var j = 0; j <= 20; j++)
    { x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> },
{ x: new Date(2012, 1, 1, <?php echo $i - 1; ?>), y: <?php echo $invertir[$i]; $i++; ?> }

有什么想法吗？谢谢

【问题讨论】：

所以你想生成一个canvasjs可以解释的格式的数组？在我看来，您正试图强制创建一个数组，但这种方式不起作用。你用这段代码实现了什么？我不是 Javascrit 专家，但对我来说，你的代码什么也没做。您必须将不同的元素推送到变量中，因此您无需确定是否需要逗号。你的数据源是哪个？一个 JSON 文件？ SQL 表？
我正在尝试重复 js 行，但是这个 for 循环不起作用。 CanvasJS 可以解释这一行。数组 $invertir 的来源是一个 MySQL 数据库。如果我输入所有行，可以工作，但循环不起作用。谢谢你

标签： javascript php for-loop canvasjs

【解决方案1】：

正如 cmets 中所说，尝试手动强制创建包含数据的数组是一种不好的方法。因为你使用 MySQL，你可以尝试这样的事情：

// Creamos una array vacía

$myDataPoints = array();

// Usa la siguiente variable $conexion...

$conexion = mysqli_connect("tuIP","tuUser","tuPassword","tuDB");

// o adapta la siguiente línea con la variable previamente creada por ti

$rawData = mysqli_query($conexion, "SELECT * FROM tablaConDatos");

// Ejecutamos el Loop para cada línea de resultados de la consulta 

while($row = mysqli_fetch_array($rawData))
{

/* Calculamos la fecha. En tu ejemplo, parece que sólo quieres variar la hora
sustrayendo 1 hora a cada número de línea. Este método sólo funciona si tu
tabla de datos tiene menos de 25 líneas */

$fecha = date(DATE_ATOM, mktime($row - 1, 0, 0, 1, 1, 2012));

// Creamos el objeto... 

$point = array("x" => $fecha , "y" => $row['invertir']);

// ... y lo mandamos al array 

array_push($myDataPoints, $point);

echo 'var myDataPoints = '.json_encode($myDataPoints).';';

}

这种方法会生成一个 JSON 数组 (myDataPoints)，您可以在正常的 canvasjs 调用中轻松使用它：

var chart = new CanvasJS.Chart("chartContainer", {
                    data: [
                        {
                            dataPoints: myDataPoints
                        }
                    ]
                });

【讨论】：