使用CanvasJS图表循环js

时间:2015-03-13 12:17:52

标签: javascript php for-loop canvasjs

我有这段代码(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++; ?> }
&#13;
&#13;
&#13;

除了最后一行之外,所有的行都是平等的,这不是&#34;,&#34;

我需要循环此代码,但for循环不起作用,我试试这个,但不能工作:

&#13;
&#13;
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++; ?> }
&#13;
&#13;
&#13;

有什么想法吗?感谢

1 个答案:

答案 0 :(得分:1)

如评论中所述,尝试手动强制创建包含数据的数组是一种不好的方法。因为你使用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
                        }
                    ]
                });