javascript - 用highcharts绘制mysql数据

标签 javascript php jquery mysql highcharts

我正在尝试使用 highcharts 在文档加载时绘制 mysql 表中的数据: html 看起来像这样:

function FetchData(){
        //alert("Fetching");
        $.ajax({
            url: 'php/reports/fetch_data.php',
            success: function(data) {
                dataTemp = [];
                for(i=0;i<data.length;i++){
                    dataTemp.push(data[i][0]);  // '1' index for getting that temp value. '0' for date.     
                }

                c_temperature.series[0].data = dataTemp;
                for(i=0;i<data.length;i++){
                    dataTemp.push(data[i][1]);  // '1' index for getting that temp value. '0' for date.     
                }
                c_temperature.series[1].data = dataTemp;
                }

            });

function DrawCharts(){
        c_temperature = new Highcharts.Chart({
            chart: {
                renderTo: 'dashboard',
                defaultSeriesType: 'spline',
            },
            title: {
                text: 'Temperatur'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150,
                maxZoom: 20 * 1000
            },
            yAxis: {
                minPadding: 0.2,
                maxPadding: 0.2,
                title: {
                    text: 'Value',
                    margin: 10
                }
            },
                legend:{
                    enabled: false
                },
                credits:{
                    enabled: false
                },
                series: [{
                    name: 'Temperatur',
                    data: []
                }]
        });

$(document).ready(function() {
        DrawCharts();
        FetchDevices();
        FetchData();



    });

<body>
<div id="dashboard">
</div>
<div class="clear"></div>
</body>

我调用的 php 看起来像这样:

try {
    $con = new PDO("mysql:host=$servername; dbname=$dbname", $username, $password);#
    echo 'Connected</br>';
    $sql = "select ZEIT,FEUCHTE,TEMPERATUR,LUX,PITCH from ".$mac.
    " order by ID";

    foreach($con - > query($sql) as $row) {
        $x = $row['ZEIT'];
        /*$x = mktime()*1000;*/
        $y_h = (float) $row['FEUCHTE'];
        /*$y_t=(float)$row['TEMPERATUR'];
        $y_l=(float)$row['LUX'];
        $y_a=(float)$row['PITCH'];*/
        $ret = array($x, $y_h, /*$y_t,$y_l,$y_a,$mac*/ );
        echo json_encode($ret);
    }
    $con = null;
}

php代码成功返回数据。 但我没有看到图表,并且使用浏览器控制台进行调试也没有给出任何线索。有什么建议我做错了什么吗?

最诚挚的问候

最佳答案

您想要使用c_Temperature.series[0].setData(dataTemp, true);c_Temperature.series[1].setData(dataTemp, true); 。通过设置数据,您实际上并没有告诉 highcharts 重新绘制图表,因此更新数据时不会发生任何事情。

关于javascript - 用highcharts绘制mysql数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30556562/

相关文章:

php - 如何使用键数组遍历多维数组?

php - 根据 url 中的 PHP $GET 在短时间内显示隐藏的 div

javascript - 如何为我的排行榜创建两列?

javascript - 使用jquery或js检测JPG CMYK图像客户端

php - MySql 如果存在则更新如果不存在则插入

php - Magento - 高级产品导入

javascript - 奇怪的行为悬停事件 jQuery

javascript - 根据用户屏幕大小加载 js 或 php

jquery - 无法在 jquery ui 可排序事件中的 $.each 函数中使用 $(this)

javascript - 对表示没有年份的月份的整数进行排序