在其他文件中提交表单后显示高图表

Showing up highchart after submitting form in other file

本文关键字：显示 高图表 表单 提交 其他 文件      更新时间：2023-09-26

需要帮助...我想在file_1显示高图表，当高图表脚本在file_2上时。我正在使用PHP，Jquery和AJAX...这是脚本

SCR_test02.php 

<?php 
require "function.inc.php";
//require "showscr.php";
include "conn.php";
include "q_table.php";
?> 
<form name="scr_form">
<table border="1" align="center" width="80%">
<tr>
  <td align="center">
   <input type="button" onClick="SCRajaxFunction()" value="Submit" id="sub">
  </td>
  <td>
   <input type="reset">
  </td> 
 </tr>  
<tr>
    <td colspan="6">&nbsp;
    <div id="scr"></div>
    </td>
</tr>

</table>
</form>
<script src="../Highcharts-3.0.5/js/highcharts.js"></script>

</html>

功能.inc

var htmlobjek; 
$(document).ready(function()
{ 
  $("#region").change(function()
  {
    var region = $("#region").val(); 
    $.ajax(
    { 
        url: "GetMSC.php", 
        data: "region="+region, 
        cache: false, 
        success: function(msg)
        {   
            $("#msc").val(msg); 
        } 
    }); 
  }); 
}); 

//Ketika form di submit
function SCRajaxFunction(){
    var ajaxRequest;  // The variable that makes Ajax possible!
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function()
    {
        if(ajaxRequest.readyState == 4)
        {
            var ajaxDisplay = document.getElementById('scr');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }
    var period = document.getElementById('period').value;
    var datefrom = document.getElementById('datefrom').value;
    var dateto = document.getElementById('dateto').value;
    var region = document.getElementById('region').value;
    var msc = document.getElementById('msc').value;
    //var rows = document.getElementById('rows').value;
    var dataString = "?datefrom=" + datefrom + "&dateto=" + dateto + "&region=" + region + "&msc=" + msc + "&period=" + period;// + "&rows=" + rows;
    ajaxRequest.open("GET", "ShowSCR.php" + dataString, true);
    ajaxRequest.send(null); 
}

展会SCR

<html>  
<?
require "function.inc.php";
    //require "highchart_tes.php";
    include "conn.php";
    $period = $_GET['period']; 
    $datefrom = $_GET['datefrom']; 
    $dateto = $_GET['dateto'];
    $region = $_GET['region'];
    $msc = $_GET['msc'];
        $drop=array(); 
        $drop2=array();     
        $traffic=array();
        $data1=array(); 
        $data2=array();
        $sql = "SELECT distinct Date_id, hour_id 
            FROM scrkpi_h
            WHERE Date_id >= '2012-12-01' 
            AND Date_id <= '2012-12-03'
            AND MSC like 'MSBDL%'
            ORDER BY Date_id ASC ";  
        $qry = mysql_query($sql,$koneksi) or die ("Gagal Query - ".mysql_error());  
        while ($data=mysql_fetch_array($qry))
        {  

            $a = date('Y-m-d ', strtotime($data['Date_id']));
            $data1[] = $a. $data[1];
        }  

?>  
    <script type="text/javascript" src="../Highcharts-3.0.5/js/type/jquery-1.7.1.min.js"></script>
    <script src="../Highcharts-3.0.5/js/highcharts.js"></script>

<script type="text/javascript">

    var chart1;
    $(document).ready(function() 
    {
            chart1 = new Highcharts.Chart(
            {
                chart: {
                renderTo: 'scr_core'
                },
                title: {
                    text: 'SCR Core ',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: 
                {
                    categories: ['<?php echo join($data1, "','") ?>'],
                    //['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    labels: 
                    {
                        rotation: -90
                    }   
                },
                yAxis: {
                    title: {
                        text: '%'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            this.x +': '+ this.y +' % (percentage)';
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: 
                [
                <?php //query tiap msc lbih dulu, baru tiap msc diambil datanya, dijadikan data berjajar berdasar koma
                $sql   = "SELECT distinct msc_id, MSC 
                        FROM `scrkpi_h` 
                        WHERE MSC like 'MSBDL%'"; //buat data di legend
                $query = mysql_query( $sql );
                while( $ret = mysql_fetch_array( $query ) ){
                   $nId = $ret[0]; //query dari scrkpi_h, msc_id = array 0
                   $nodes = $ret[1];
                      $sql_   = "SELECT * FROM `scrkpi_h` 
                      WHERE `msc_id`='$nId' 
                      AND Date_id >= '2012-12-01' 
                      AND Date_id <= '2012-12-03'
                      AND MSC like 'MSBDL%'
                      ORDER BY Date_id ASC ";
                      $query_ = mysql_query( $sql_ );
                      $data = "";
                      while( $ret_ = mysql_fetch_array( $query_ ) ){
                         $kel = $ret_['scrCombine'];
                         $data = $data . "," . $kel;
                      }
                      $data = substr( $data , 1 , strlen( $data ) );
                ?>
                {
                    name: '<?php echo $nodes; ?>',
                    data: [<?php echo $data; ?>]
                      },
                <?php

                }
                ?>
                ]
            });
        });
</script>
<div id='scr_core' style='min-width: 10px; height: 10px; margin: 0'></div>
</html>

图表已显示在文件ShowSCR上.php但是我想在文件SCR_test02.phpdiv="scr" 上显示它，当我单击"提交"按钮时如何解决，我已经尝试了很多次但没有工作，真的需要帮助

它

不起作用，因为在你的例子SCR_test02.php你有行 

`require "function.inc.php";
//require "showscr.php";
include "conn.php";
include "q_table.php";`

但是在这个文件中，你没有图表初始化，只有调用 Ajax 等等。你需要在 php 中添加 javascript highcharts 调用或准备扩展，这将是 SCR_test02.php 和 ShowSCR 的通用文件，包含在 reguire declatarion 中。

编辑：常见.php

<script src="path/to/highcharts.js"></script>
<script>
  //highcharts initialization
</script>

然后在您使用的每个文件中 

require "common.php"
相关文章：