从View PHP发送到Javascript函数的绘图数组

Question

您好，我有以下任务：

从数据库中检索数据并保存到阵列（检查）
从控制器发送数组到视图（检查）
使用json_encode（CHECK）将数组传递给javascript函数
使用Bootstrap图表绘制数组（问题！）

如果我使用Bootstrap图表随附的标准数组（下面的var d），则可以使用。 但是，当我尝试使用代码时，什么也没有发生。 我在哪里失败？

var d = [[-373597200000, 315.71], [-370918800000, 317.45], [-368326800000, 317.50], [-363056400000, 315.86]]

我改用下面的代码行：

var d =  JSON.parse( '<?php echo json_encode($my_values) ?>' );

这是数组的示例，如果我将其打印，并将其打印在中间，则为空白： http : //postimg.org/image/3t3paj3vn/

这是我的完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Flot Examples: Time Axes</title>
    <link href="../examples.css" rel="stylesheet" type="text/css">
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="../../jquery.js"></script>
    <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="../../jquery.flot.time.js"></script>

</head>
<body>
            <select id="chapter_select">
                 <option value="0"> Select Patient</option>
                 <?php foreach($patients as $patient):?>
                        <option value= <?php echo $patient->id?> > <?php echo $patient->name ?>                            </option>
                <?php endforeach?> 
            </select><br><br>
                <?php $i= 0;?>
                <?php foreach($datas as $row):?>
                    <?php  $my_values[$i] = (array($row['data'],$row['total']));?>
                    <?php $i = $i+1;?>
                <?php endforeach;?>

    <div id="content">

        <div class="demo-container">
            <div id="placeholder" class="demo-placeholder"></div>
        </div>

        <p>Monthly mean atmospheric CO<sub>2</sub> in PPM at Mauna Loa, Hawaii (source: <a href="http://www.esrl.noaa.gov/gmd/ccgg/trends/">NOAA/ESRL</a>).</p>

        <p>If you tell Flot that an axis represents time, the data will be interpreted as timestamps and the ticks adjusted and formatted accordingly.</p>

        <p>Zoom to: <button id="whole">Whole period</button>
        <button id="nineties">1990-2000</button>
        <button id="latenineties">1996-2000</button></p>

        <p>Zoom to: <button id="ninetyninequarters">1999 by quarter</button>
        <button id="ninetynine">1999 by month</button>
        <button id="lastweekninetynine">Last week of 1999</button>
        <button id="lastdayninetynine">Dec. 31, 1999</button></p>

        <p>The timestamps must be specified as Javascript timestamps, as milliseconds since January 1, 1970 00:00. This is like Unix timestamps, but in milliseconds instead of seconds (remember to multiply with 1000!).</p>

        <p>As an extra caveat, the timestamps are interpreted according to UTC and, by default, displayed as such. You can set the axis "timezone" option to "browser" to display the timestamps in the user's timezone, or, if you use timezoneJS, you can specify a time zone.</p>

    </div>

    <div id="footer">
        Copyright &copy; 2007 - 2014 IOLA and Ole Laursen
    </div>


    <script type="text/javascript">

    $(function() {

    var d =  JSON.parse( '<?php echo json_encode($my_values) ?>' );

        $("#latenineties").click(function () {
            $.plot("#placeholder", [d], {
                xaxis: {
                    mode: "time",
                    minTickSize: [1, "year"],
                    min: (new Date(1996, 0, 1)).getTime(),
                    max: (new Date(2000, 0, 1)).getTime()
                }
            });
        });

        $("#ninetyninequarters").click(function () {
            $.plot("#placeholder", [d], {
                xaxis: {
                    mode: "time",
                    minTickSize: [1, "quarter"],
                    min: (new Date(1999, 0, 1)).getTime(),
                    max: (new Date(2000, 0, 1)).getTime()
                }
            });
        });

        $("#ninetynine").click(function () {
            $.plot("#placeholder", [d], {
                xaxis: {
                    mode: "time",
                    minTickSize: [1, "month"],
                    min: (new Date(1999, 0, 1)).getTime(),
                    max: (new Date(2000, 0, 1)).getTime()
                }
            });
        });

        $("#lastweekninetynine").click(function () {
            $.plot("#placeholder", [d], {
                xaxis: {
                    mode: "time",
                    minTickSize: [1, "day"],
                    min: (new Date(1999, 11, 25)).getTime(),
                    max: (new Date(2000, 0, 1)).getTime(),
                    timeformat: "%a"
                }
            });
        });

        $("#lastdayninetynine").click(function () {
            $.plot("#placeholder", [d], {
                xaxis: {
                    mode: "time",
                    minTickSize: [1, "hour"],
                    min: (new Date(1999, 11, 31)).getTime(),
                    max: (new Date(2000, 0, 1)).getTime(),
                    twelveHourClock: true
                }
            });
        });

        // Add the Flot version string to the footer

        $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
    });

    </script>

</body>
</html>

Answer 1

问题是引导代码无法识别我的日期时间。 因此，我将其转换为UNIX时间戳。 这是我的查询

 $query = $this->db->query(" SELECT exam.id AS exam, UNIX_TIMESTAMP(exam.date) AS data, SUM( choice.value ) AS total FROM exam INNER JOIN choice ON exam.id = choice.exam_id WHERE exam.patient_id = $patient_id AND exam.id = choice.exam_id GROUP BY exam.date"); $data = array(); foreach ($query->result() as $row) { $data[] = array( 'exam' => $row->exam, 'data' => $row->data, 'total' => $row->total ); } return $data;

然后用了法兰·阿里的建议
var d =

 var d = '<?php json_encode($my_values); ?>

Answer 2

尝试这个：

var d =  JSON.parse( '<?php echo($my_values); ?>' );

从View PHP发送到Javascript函数的绘图数组

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-04-24 15:37:06

解决方案2
0 2015-04-24 14:43:45

从View PHP发送到Javascript函数的绘图数组

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-04-24 15:37:06

解决方案2 0 2015-04-24 14:43:45

解决方案1
1 已采纳 2015-04-24 15:37:06

解决方案2
0 2015-04-24 14:43:45