javascript - 使用 PHP 在 Highcharts 中导入数据

Question

我无法从 mysql 表中获取数据，代码似乎是正确的。在浏览器中存在空白图表，但是图表中没有填充数据!我有两个表 group & member 并且我在这两个表中有多对多的关系。第三个表是member_group，它有group 表和member 表的id，group_id 和member_id。我的数据库连接正常。

我已将这两个链接包含在标题中，该标题包含在我网站的所有页面中。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

PHP 代码:

<?php
    include 'template-parts/header.php';
    include 'connection.php';
    <div class="container home">
        $result=mysqli_query($connection,"SELECT `group`.`name`,`member`.`member_name` FROM       `group`,`member`,`member_group`
                                          WHERE `member_group`.`group_id` = `group`.`id`
                                          AND `member_group`.`member_id` = `member`.`id`
                                          ORDER BY `group`.`name`");
        while($row = mysqli_fetch_array($connection,$result)) {
            echo $row['group.name'] . "\t" . $row['member_name']. "\n";
        }
        mysqli_close($con);
?>
<br />
<br />

HighChart 代码:

<?php 
    include 'template-parts/header.php';
    include 'connection.php';
?>
<div class="container home">
    <h3> History By Charts </h3>
    <div id="sales" style="min-width: 310px; height: 400px; margin: 0 auto"> 
</div>
<script type="text/javascript">
    var chart;
    $(document).ready(function() {
        var cursan = {
            chart: {
                renderTo: 'sales',
                defaultSeriesType: 'area',
                marginRight: 10,
                marginBottom: 20
            },
            title: {
                text: 'Total Members Per group',
            },
            xAxis: {
                categories: ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan',     'Feb', 'Mar']
            },
            yAxis: {
                title: {
                    text: 'Average'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                crosshairs: true,
                shared: true
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 30,
                borderWidth: 0
            },

            plotOptions: {
                series: {
                    cursor: 'pointer',  
                    marker: {
                        lineWidth: 1
                    }
                }
            },

            series: [{
                color: Highcharts.getOptions().colors[2],
                name: 'Test Colomn',
                marker: {
                    fillColor: '#FFFFFF',
                    lineWidth: 3,
                    lineColor: null // inherit from series
                },
                dataLabels: {
                    enabled: true,
                    rotation: 0,
                    color: '#666666',
                    align: 'top',
                    x: -10,
                    y: -10,
                    style: {
                        fontSize: '9px',
                        fontFamily: 'Verdana, sans-serif',
                        textShadow: '0 0 0px black'
                    }
                }
            }],
        }

        //Fetch MySql Records
        jQuery.get('chartsphp.php', null, function(tsv) {
            var lines = [];
            traffic = [];
            try {
                // split the data return into lines and parse them
                tsv = tsv.split(/\n/g);
                jQuery.each(tsv, function(i, line) {
                    line = line.split(/\t/);
                    date = line[0] ;
                    amo=parseFloat(line[1].replace(',', ''));
                    if (isNaN(amo)) {
                        amo = null;
                    }
                    traffic.push([
                        date,
                        amo
                    ]);
                });
        } catch (e) {  }
        cursan.series[0].data = traffic;
        chart = new Highcharts.Chart(cursan);
    });
});
</script>
<br />

谢谢。

Answer 1

我大约一年前从事过 highcharts 工作。记不太清楚了，但我可以提供一些帮助 无论你在哪里传递值，都使用

<?php while($your_row_value = mysqli_fetch_array($query_result) { ?>
 highchart_value = <?php echo $your_row_value['your_table_attribute'] ; ?> 
}

无论你想要什么值，你都可以简单地做到这一点