Highcharts：根据表单输入动态显示数据

Question

我想在 index.php 页面上用图表显示数据。

我该怎么办？，这是我目前试过的：

我有一个 HTML 页面：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts</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',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'San luong Card',
                x: -20 //center
            },
            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {
                categories: []
            },
            yAxis: {
                title: {
                    text: 'Tong tien'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#red'
                }]
            },
            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
            },
            plotOptions: {
                area: {
                    stacking: 'high',
                    lineColor: '#666666',
                    lineWidth: 1,
                    marker: {
                        lineWidth: 1,
                        lineColor: '#666666'
                    }
                }
            },
            series: []
        }

            $.getJSON("data.php", function(json) {
            options.xAxis.categories = json[0]['data'];
            options.series[0] = json[1];
            var chart = new Highcharts.Chart(options);
            return false;
            })

    });
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
    <form method="post" action="data.php" id="form_search">
        <header><h3>Thong ke CCU</h3></header>
        <div class="module_content">
                <fieldset>
                    <label>Tu ngay</label>
                    <input type="text" name="t_n" />
                </fieldset>
                <fieldset>
                    <label>Den ngay</label>
                    <input type="text" name="d_n" />
                </fieldset>
                <div class="clear"></div>
        </div>
        <footer>
        <div class="submit_link">
            <input type="submit" name="s_t" value="Search" id="submit" class="alt_btn">
            <input type="reset" name="reset" value="Refesh" >
        </div>

    </form>
                <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    </body>
</html>

当我提交值为 2 的表单时，文本字段数据显示在 data.php 上，数据类型为 JSON。

代码data.php:

if(isset($_POST['s_t'])){
    include("../config/dbconnect.php");
    $date = new DateTime();
        $t_n = strtotime($_POST['t_n']);
        $d_n = strtotime($_POST['d_n']);
        $tn = date("Y-m-d",$t_n);
        $dn = date("Y-m-d",$d_n);
        $query = mysql_query("select SUM(ccu) as sumccu,DATE_FORMAT(date,'%d-%m') as day from skycity_log.ccu_log where date >='".$tn."' AND date <='".$dn."' GROUP BY date") or (mysql_error());

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

        $series1 = array();
        $series1['name'] = 'CCU';

        while($r = mysql_fetch_array($query)) {
            echo $r['day'];
            $category['data'][] = $r['day'];
            $series1['data'][] = $r['sumccu'];     
        }

    $result = array();
    array_push($result,$category);
    array_push($result,$series1);

    print json_encode($result, JSON_NUMERIC_CHECK);
}  
?>

Answer 1

缺少的部分是：

拦截表单提交（例如通过使用 jquery.submit 定义一个提交处理程序）
从服务器手动获取 JSON 数据（例如使用 jquery.post）
如果需要，将接收到的数据转换为 Highcharts 系列格式
使用接收到的数据（当前在您的 document.ready 处理程序中的代码）初始化 Highcharts

Highcharts：根据表单输入动态显示数据

Highcharts: Show data dynamically based on form input

javascript

php

highcharts