显示高图表并使用 php 从 mysql 数据库中获取图表的数据

Displaying highchart and using php to get data for the chart from mysql database

本文关键字：获取 数据 数据库 mysql 高图表 php 显示      更新时间：2023-09-26

当我从数据库中读取数据并使用它来显示图表时，Highchart没有显示任何内容。 

$.post('ajax/like_get_option1.php' , function(data){op1= data;}); //php file is called which connects to database and echo out the result
$.post('ajax/like_get_option2.php' , function(data){op2= data;});
$.post('ajax/like_get_option3.php' , function(data){op3= data;});
$.post('ajax/like_get_option4.php' , function(data){op4= data;});
$.post('ajax/like_get_option5.php' , function(data){op5= data;});
$.post('ajax/like_get_option6.php' , function(data){op6= data;});

     var arr = [op1,op2,op3,op4,op5,op6]; //making array of all the values to pass in highchart
    var options = {
        chart:{
        type: 'column',
        margin: 150,
        options3d:{
            enabled: true,
            alpha: 10,
            beta: 25,
            depth: 70,
            viewDistance: 25
        }

    },
    title:{
        text: 'Demo'
    },
    subtitle:{
        text:'Test'
    },
    plotOptions:{
        column:{
            depth: 25
        }
    },
     xAxis: {
            categories:['x','y','z','a','b','c']
        },
    yAxis: {
        title: {
            text: null
        }
    },
    series: [{
        name: 'Poll',
            data: arr
        }]
    };

var y = $('#container');  
var tween4 =y.highcharts(options); // passing values to highchart

我只需要访问我的数据库来获取值并将其传递给HighChart。任何建议将不胜感激？？

简单的图表图，其中包含来自MySQL数据库的数据

$(function () {
$('#container').highcharts({
    chart: {
        type: 'line'
    },
    title: {
        text: 'Monthly Average Temperature'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: false
        }
    },
    <?php 
    $sql = 'SELECT count(*) as counter FROM example limit 12';
    mysql_select_db('test_db');
    $retval = mysql_query( $sql, $conn );
    echo 'series: [{
        name: 'Example',
        data: [
        while($row = mysql_fetch_array($retval, MYSQL_ASSOC)) {
        echo $row['counter'].",";
       }]
    }]';
    ?>
});
});

你可以在 PHP 中使用 implode 函数用逗号拆分数组并转换为字符串

series: [{
    name: 'Poll',
        data: [<?php echo implode(",",$arr); ?>]
    }]
};

结果

data : [op1,op2,op3....]

代码的一般问题是在调用所有 ajax 之前初始化图表。你应该在回调中使用$.when() then() jquery和init chart。

 $.post('ajax/like_get_option1.php' , function(data){
        op1= parseInt(data);
        $.post('ajax/like_get_option2.php' , function(data){op2= parseInt(data);
            $.post('ajax/like_get_option3.php' , function(data){op3= parseInt(data);
            $.post('ajax/like_get_option4.php' , function(data){op4=parseInt(data);
            $.post('ajax/like_get_option5.php' , function(data){op5= parseInt(data);
            $.post('ajax/like_get_option6.php' , function(data){op6= parseInt(data);
            high_chart() ;
            })       
            })                                                                                                                                
            })
            })
            })
            });

我使用简单的循环在另一个内部执行 ajax 调用，然后最终调用 highchart，它起作用了。此外，我将数据直接从 php 文件传递到即将出现的字符串的高图表。所以我使用 parseInt 来转换 int 中的值，经过一些磨难后它起作用了。

相关文章：