javascript - 绘制从 View PHP 发送到 Javascript 函数的数组

标签 javascript php arrays json jqplot

您好,我有以下任务:

<小时/>
  • 从数据库检索数据并保存到数组(CHECK)
  • 将数组从 Controller 发送到 View (CHECK)
  • 使用 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>

最佳答案

问题是引导代码无法识别我的日期时间。因此,我将其转换为 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;

然后使用了 Faran Ali 的建议
var d =

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

关于javascript - 绘制从 View PHP 发送到 Javascript 函数的数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29850362/

相关文章:

javascript - object.innerHTML 未正确更新?

javascript - Jquery attr 函数在 IE 9 中不起作用

php - 获取标题和 likeCount youtube API

php - 透明 mysql_error 日志记录 : How can I read mysql_error() twice?

javascript - Angular - 模板驱动表单 - Controller 中的自定义验证器功能

PHPExcel getFormatCode 问题

java - 根据每个元素值的总和拆分数组

PHP 在相似元素上组合数组

javascript - 使用这个内部对象数组

javascript - jQuery position().top 与固定父级中的 offset().top 行为相同