Question

我试图在用户点击链接时生成图表，以便data.php根据用户请求从db获取数据并将用户重定向到chart.php以生成图表，同时重定向用户图表完全闪烁。 / p>

Data.php文件代码如下：

<?php

include('../../conn.php');

@$query = $connection->query("SELECT * from localitems where city='".$_REQUEST['prov']."' ");

$category = array();
$category['name'] = 'Month';

$series1 = array();
$series1['name'] = 'Wheat';
$series2 = array();
$series2['name'] = 'Rice';

$series3 = array();
$series3['name'] = 'Maize';
$series4 = array();
$series4['name'] = 'Mungbeans';

$series5 = array();
$series5['name'] = 'Pea';
$series6 = array();
$series6['name'] = 'Potato';
$series7 = array();
$series7['name'] = 'Milk';
$series8 = array();
$series8['name'] = 'Beef ';
$series9 = array();
$series9['name'] = 'Mutton';
$series10 = array();
$series10['name'] = 'Chicken';
$series11 = array();
$series11['name'] = 'DAP ';
$series12 = array();
$series12['name'] = 'Agriculture';
$series13 = array();
$series13['name'] = 'Pair of Oxan';
$series14 = array();
$series14['name'] = 'Water Pump';
$series15 = array();
$series15['name'] = 'Tractor Hiring';

while($r =$query->fetch_assoc()) {
    $category['data'][] =$r['month'];
    $series1['data'][] = $r['Wheat'];
    $series2['data'][] = $r['Rice'];
    $series3['data'][] = $r['Maize'];
    $series4['data'][] = $r['Mungbeans'];
    $series5['data'][] = $r['Pea'];
    $series6['data'][] = $r['Potato'];
    $series7['data'][] = $r['Milk'];
    $series8['data'][] = $r['Beef'];
    $series9['data'][] = $r['Mutton'];
    $series10['data'][] = $r['Chicken'];
    $series11['data'][] = $r['Dap'];
    $series12['data'][] = $r['Oxan_pair'];
    $series13['data'][] = $r['Agriculture'];
    $series14['data'][] = $r['Waterpump'];
    $series15['data'][] = $r['Tractor_hiring'];
}
    $result = array();
    array_push($result,$category);
    array_push($result,$series1);
    array_push($result,$series2);
    array_push($result,$series3);
    array_push($result,$series4);
    array_push($result,$series5);
    array_push($result,$series6);
    array_push($result,$series7);
    array_push($result,$series8);
    array_push($result,$series9);
    array_push($result,$series10);
    array_push($result,$series11);
    array_push($result,$series12);
    array_push($result,$series13);
    array_push($result,$series14);
    array_push($result,$series15);
    print json_encode($result, JSON_NUMERIC_CHECK);
    if($result==true){
    header('location:chart.php');
   }else{ echo "Nothing fetched";}

//mysql_close($con);
?>

此文件读取data.php并生成。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Imported Kabul</title>
            <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'column',
                    marginRight: 130,
                    marginBottom: 25
                },
                title: {
                    text: 'Local Item Price in Kabul',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    categories: []
                },
                yAxis: {
                    title: {
                        text: 'Price Per (KG, Hour, Labor)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            this.x +': '+ this.y;
                    }
                },
                legend: {
                    layout: 'Vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: []
            }
            $.getJSON("data.php", function(json) {
                options.xAxis.categories = json[0]['data'];
                options.series[0] = json[1];
                options.series[1] = json[2];
                options.series[2] = json[3];
                options.series[3] = json[4];
                options.series[4] = json[5];
                options.series[5] = json[6];
                options.series[6] = json[7];
                options.series[7] = json[8];
                options.series[8] = json[9];
                options.series[9] = json[10];
                options.series[10] = json[11];
                options.series[11] = json[12];
                options.series[12] = json[13];
                options.series[13] = json[14];
                options.series[14] = json[15];

                chart = new Highcharts.Chart(options);
            });
        });
        </script>

        <script src="../js/highcharts.js"></script>
        <script src="../js/exporting.js"></script>
<style>
.text{
    font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size:14px;
    color:#FFF;
    font-size:medium;
}
</style>
<link rel="stylesheet" href="../../css/main.css" />
    </head>
    <body>
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div><br/>
</body>
</html>

Answer 1

$( document ).ready(function () {
    drawchart();
    //dynamic value to function u can feed here
});

function drawchart ()
{
    var chart = new Highcharts.Chart({    

        chart: {
            renderTo: 'container',
            type: 'scatter'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        tooltip: {
            shared: false,
            useHTML: true,
            footerFormat: '</table> <span>"new text"</span>',
            valueDecimals: 2
        },

        plotOptions: {
            scatter: {
                tooltip: {
                    headerFormat: '<small>{point.key}</small><table>',
                    pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
                        '<td style="text-align: right"><b>{point.y} EUR</b></td></tr>'
                }
            }
        },


        series: [{
            name: 'Short',
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            name: 'Long named series',
            data: [129.9, 171.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 195.6, 154.4].reverse()
        }]

    });
}

具有动态数据的Highchart

1 个答案: