Question

我正在尝试使用canvas.js在单个页面上显示一堆图表

这里是原始示例： play-smart.gr/stats/index2.php

在页面的最后，有一张canvasjs创建的图表。但是，我想要该页面上每个表格的图表。

尚未尝试许多操作，因为创建第一张图表后我不知道如何进行。您会看到这些表是根据一个帐户每天一次的结果记录从数据库创建的。这些帐户可能会增加，但是我使用的SQL查询会在页面末尾进行选择并创建一个新表。因此，这些表可能会随时间变化。删除帐户后，该表也将被删除。因此，我没有固定数量的帐户可以处理并为每个帐户创建数组。我需要一种动态创建数组并将其动态传递到chart.render（）的方法。

这是到目前为止我的代码，该代码创建所有表并为最后一个表创建图表。

    $idsarray =array();
    for($i=0; $i<$counter; $i++)
    {
        $idsarray[]=$return[$i]['bet_acount_id'];
    }
    $uniqueids = array_unique($idsarray);
    //print_r(array_unique($idsarray)); prints out the unique ids for the whole results array.

    foreach($uniqueids as $uniqueid)
    {
        $arraytoplot = array();
        $arraytoplot1 = array();
        $arraytoplot2 = array();
        echo '<table class="std_table">
        <thead>
        <tr>
            <th colspan="3">Daily Stats of bet accounts totals for robot: '.FindBetAccountFromId($return,$uniqueid,$counter).' - Bet account id: '.$uniqueid.'</th>    
        </tr>
        <tr>
            <th colspan="1" style="width:33%;">Sum - total (money + Unsettled)</th>
            <th colspan="1" style="width:33%;">delta-V</th>
            <th colspan="1" style="width:33%;">Date and time</th>
        </tr>
        </thead>
        <tbody>';
        $currentTableRow = 0;
        $previousRowIndex = 0;
        for($i=0; $i<$counter; $i++)
        {
            if($uniqueid==$return[$i]['bet_acount_id'])
            {
                if($currentTableRow==0)
                {
                    $previousValue=($return[$i]['total']+$return[$i]['unsettled']);

                }
                else
                {
                    $previousValue=($return[$previousRowIndex]['total']+$return[$previousRowIndex]['unsettled']);
                }
                array_push($arraytoplot1, array('x' => strtotime($return[$i]['datetime']), 'y'=>($return[$i]['total']+$return[$i]['unsettled'])));
                array_push($arraytoplot2, array('x' => strtotime($return[$i]['datetime']), 'y'=>(($return[$i]['total']+$return[$i]['unsettled'])-$previousValue)));
                $arraytoplot[$currentTableRow]=array('total' => ($return[$i]['total']+$return[$i]['unsettled']), 'dV'=>(($return[$i]['total']+$return[$i]['unsettled'])-$previousValue), 'date'=>date("d-m-Y \a\\t G:i:s", strtotime($return[$i]['datetime'])));
                echo '<tr>
                    <td>'.($return[$i]['total']+$return[$i]['unsettled']).'</td>
                    <td>'.(($return[$i]['total']+$return[$i]['unsettled'])-$previousValue).'</td>
                    <td>'.date("d-m-Y \a\\t G:i:s", strtotime($return[$i]['datetime'])).'</td>
                </tr>';
                //echo 'Sum for Bet account: '.$return[$i]['bet_acount_id'].'Username: '.$return[$i]['bet365_username'].' is '.($return[$i]['total']+$return[$i]['unsettled']).'. Thats on Date: '.date("d-m-Y \a\\t G:i:s", strtotime($return[$i]['datetime'])).'<br>';
                $currentTableRow++;
                $previousRowIndex = $i;
            }
        }
        echo '</tbody>
        </table>';
        ?>
        <script>

        </script>
    <?php
    } ?>



    <div id="chartContainer" style="height: 370px; width: 100%;"></div>
    <script>
        window.onload = function () {
            var chart = new CanvasJS.Chart("chartContainer", {
                theme: "light2", // "light1", "light2", "dark1", "dark2"
                animationEnabled: true,
                zoomEnabled: true,
                title: {
                    text: "Δοκιμάστε zoom και pan"
                },
                data: [{
                    type: "area",
                    name: "Total",
                    showInLegend: "true",
                    xValueType: "dateTime",
                    xValueFormatString: "MMM YYYY",
                    yValueFormatString: "€#,##0.##",
                    dataPoints: <?php echo json_encode($arraytoplot1); ?>
                },
                {
                    type: "area",
                    name: "delta-V",
                    showInLegend: "true",
                    xValueType: "dateTime",
                    xValueFormatString: "MMM YYYY",
                    yValueFormatString: "€#,##0.##",
                    dataPoints: <?php echo json_encode($arraytoplot2); ?>
                }]
            });
            chart.render();
        }
    </script>
    <?php 
    print_r($arraytoplot1);
    echo '<br>';
    print_r($arraytoplot2);
    $result='all operations completed successfully'; ?>

此外，日期时间格式字符串不起作用，它代替了日期，它给出了时间，但我想我们可以稍后解决。

无论如何，此代码应能正常工作，但我不知道如何使其动态化。有什么想法吗？

一页上的多个数组，每个数组创建2个图表。如何使用canvajs进行绘制？

0 个答案: