Question

是的我知道这个问题在stackoverflow中以不同的方式被多次询问过。但我真的无法理解如何在高图中显示mysql数据。说实话，我已经在这方面工作了几天，但无法理解。如果有人能帮助我解决这个问题，我真的很高兴

这是我的php＆amp; mysql代码

data.php
<?php
require_once '../includes/database.php';
require_once '../includes/customer.php';
$customers=  Customer::find_by_sql("SELECT cust_name,monthly_income FROM customer");
$rows=array();
foreach ($customers as $customer) {
    $row[0]=$customer->cust_name;
    $row[1]=$customer->monthly_income;
    array_push($rows,$row);
}




print json_encode($rows, JSON_NUMERIC_CHECK);
?>

这将输出这种数据系列 [[＆＃34; Madhava＆＃34;，55000]，[＆＃34; Praveen＆＃34;，50000]，[＆＃34; Nuwan＆＃34;，120000]，[＆＃34; Thilan＆＃34; ，100000]]

现在我想在条形图中显示这些数据，该数据应采用以下格式

Monthly Income
^
|
|
|
|
-------------->Customer Name
Figure - Expected output of the bar chart

现在我要在图表中显示它们我复制了下面的代码from other website并且真的不知道如何更改代码以使其按照我的要求工作

 highcharts.php
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Pie Chart</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
    $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'container',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Customer Name Vs Income'
                },
                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                                return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Browser share',
                    data: []
                }]
            }

            $.getJSON("data.php", function(json) {
                options.series[0].data = json;
                chart = new Highcharts.Chart(options);
            });



        });      </script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>
    </head>
    <body>
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    </body>
</html>

我应该在highcharts.php中进行哪些更改才能使其正常工作？

Answer 1

$(function () {


        jQuery.extend({
            getValues: function(url) {
                var result = null;
                $.ajax({
                    url: url,
                    type: 'get',
                    dataType: 'json',
                    async: false,
                    success: function(data) {
                        result = data;
                    }
                });
               return result;
            }
        });

        var myServerData = $.getValues("data.php"); //direct this to your PHP script and make sure that right JSON is returned

        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Chart Title Here'
            },
            subtitle: {
                text: 'Place subtitle here'
            },
            xAxis: {
                type: 'category',
                labels: {
                    rotation: -45,
                    align: 'right',
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Monthly income (USD or whatever...)'
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                pointFormat: 'Monthly income: <b>{point.y:.1f} USD</b>',
            },
            series: [{
                name: 'Monthly Income',
                data: myServerData,
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: '#FFFFFF',
                    align: 'right',
                    x: 4,
                    y: 10,
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif',
                        textShadow: '0 0 3px black'
                    }
                }
            }]
        });
    });

如何使用mysql数据（PHP）创建高清？

1 个答案: