带有 PHP 数据的 Highcharts 实心仪表答案

【问题标题】：Highcharts Solid Gauge With PHP Data带有 PHP 数据的 Highcharts 实心仪表
【发布时间】：2021-12-30 07:45:33
【问题描述】：

Solid Gauge 将为我从 MySql 调用的每个湿度值显示。现在我已经挣扎了好几天了，我不知道还有什么可以尝试的。无论如何都行不通你能帮我完成我的项目吗？

在我分享的图片中，该值似乎是从 php 中提取的；但是，我想我忽略了一些东西，图形无法检测到这个数字。

HTML

<?php
include("hum.php");

?>
<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>    
      <script src = "https://code.highcharts.com/highcharts-more.js"></script>
      <script src = "https://code.highcharts.com/modules/solid-gauge.js"></script>
   </head>       
   <body>
      <div style = "width: 600px; height: 400px; margin: 0 auto">
         <div id = "container-speed" style = "width: 300px; height: 200px; float: left">
         </div>             
      </div>  
      <script language = "JavaScript">
         $(function () { 
var gaugeOptions = {
    chart: {
        type: 'solidgauge'
    },
    title: null,
    pane: {
        center: ['50%', '85%'],
        size: '100%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },
    tooltip: {
        enabled: false
    },
    yAxis: {
        stops: [
            [0.1, '#55BF3B'], // green
            [0.5, '#DDDF0D'], // yellow
            [0.9, '#DF5353'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickPixelInterval: 400,
        tickWidth: 0,
        title: {
            y: -70
        },
        labels: {
            y: 16
        }
    },   
   plotOptions: {
        solidgauge: {
            dataLabels: {
                y: 5,
                borderWidth: 0,
                useHTML: true
            }
        }
    }
};   
// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
    yAxis: {
        min: 0,
        max: 200,
        title: {
            text: 'Speed'
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Speed',
        data: [],
        dataLabels: {
            format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                   '<span style="font-size:12px;color:silver">km/h</span></div>'
        },
        tooltip: {
            valueSuffix: ' km/h'
        }
    }]
}));
// Bring life to the dials
setInterval(function () {
    point = $('#container-speed').highcharts().series[0].points[0];  
                humidity;
                $.getJSON("hum.php", function(data) {
                point.update(parseFloat(humidity));
            });
            }, 2000);
});
      </script>

PHP

<?php
$mysqli= new mysqli('localhost', 'root','','sensorsdata');
$sql = '
SELECT humidity, 
UNIX_TIMESTAMP(CONCAT_WS(" ", date, time)) AS datetime 
FROM allv1
ORDER BY date DESC, time DESC LIMIT 1
';
$result_4 = $mysqli->query($sql);
while($row_4 = $result_4->fetch_assoc()) {
  echo $row_4['humidity'];
}
?>

For the time being, this is how it appears on the screen:

My php table is like this:

如果我解决了这个问题，我会用其他值绘制图表。

编辑

尝试成功。 ** ajax 让我得到了答案...

只需像这样调整 setInterval 部分。

setInterval(function () {
    $.ajax({
    url: "hum.php",
    data: 'gauge1',
    type:'get',
    dataType: "json",
    cache: false, 
    success: function(data){
        var humidity = $.parseJSON(data);
                var chart = $('#container-speed').highcharts();
                chart.series[0].points[0].update(humidity);        
    }
});
}, 2000);
});

【问题讨论】：

标签： php mysql json highcharts gauge

【解决方案1】：

我认为 point = $('#container-speed').highcharts().series[0].points[0]; 是未定义的，因为初始数据是一个空数组 - 所以没有呈现任何点。尝试设置一些初始的虚拟数据，例如：

series: [{
    name: 'Speed',
    data: [1],
    dataLabels: {
        format: '<div style="text-align:center"><span style="font-size:25px;color:' +
            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
               '<span style="font-size:12px;color:silver">km/h</span></div>'
    },
    tooltip: {
        valueSuffix: ' km/h'
    }
}]

【讨论】：

Wedzel 我试了一下。不幸的是，它不起作用。
@melikeköse 这个点是指point 对象吗？ humidity 的值是多少？您在控制台上有任何错误吗？您能否使用示例数据在某些在线编辑器上重现您的问题？
你说的一直是我的困惑，但现在似乎奏效了。无需重新加载页面。 @SebastianWedzel
@melikeköse 你的意思是问题解决了吗？
我在上面做了一些改动。 - 现在我也在尝试为温度做这件事@SebastianWedzel