通過表格將Chartjs從Javascript保存到PHP

Question

我正在做一個報告，我需要將Graph結果放入其中。

我知道Javascript（客戶端）和PHP（服務器）問題，但是我必須解決此問題。

主要問題：我必須將Graph另存為png文件才能放入報告中。

我在這里閱讀了近百個問題，但沒有找到解決方案。

為了生成圖形，我使用的是ChartJS。

我創建了三個文件，但是我不確定是怎么回事。

PHP（exemplo4.php）

    <?php
        session_start();
    ?>
    <!DOCTYPE html>
    <html>
        <head>
            <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
            <title>Graph Chartjs Export</title>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
            <style>
                .myForm { text-align:center; }
            </style>
        </head>
        <body>
            <?php
                $example = "let's go";
                $_SESSION['example'] = $example;
            ?>
            <form id="myForm" method=POST action="graphresult4.php" >
                Value1:
                <input type="text" name="value1" value="123" /> <br><br>
                Graphic: <br>
                <input type="hidden" name="imageData" id="imageData" /> <br>
                <canvas id="drawing" width="350" height="200"></canvas> <br>
                <input type="submit" value="submit">
            </form>
            <script type="application/javascript" src="graphic4.js"></script>       
        </body>
    </html>

Java腳本

    var ctx = document.getElementById("drawing").getContext("2d");
    var data = {
         labels: ['Jan', 'Feb', 'Mar'],
         datasets: [{
                label: "# of votes",
                fillColor: "#07C",
                data: [50, 80, 200]
         }]
    };

    var myBarChart = new Chart(ctx).Bar(data, {
         scaleOverride: true,
         scaleSteps: 10, // number of ticks
         scaleStepWidth: 10, // tick interval
         scaleBeginAtZero: true
    });


    $('#myForm').submit(function(e) {
            e.preventDefault(); // don't submit multiple times
            this.submit(); // use the native submit method of the form element
            $('#myForm').val('imageData') = "2";
        //var imgData = ctx.toDataURL("image/png");
        document.getElementById('imageData').value="test";
        alert('Here');
    });

PHP（graphresult4.php）

    <?php
        session_start();
    ?>
    <!DOCTYPE html>
    <html>
        <head>
            <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
            <title>Graph Chartjs Export</title>
        </head>
        <body>
            <?php
                $example = $_SESSION['example'];
                echo '<b>PHP Variable: </b> [example] => '.$example.'<br><br>'; 
                echo '<b>POST Variables</b><br>'; 
                print_r($_POST);
            ?>
            <br>
            <br>
            <b>Script</b>
            <p> imageData = 
            <script>
                document.writeln(imageData);
            </script>
            </p>
        </body>
    </html>

為了測試我的示例，我在這里輸入：

http://profwtelles.ddns.net/teste/phpjava/exemplo4.php

我的問題是：變量imageData每次都是空白，並且javascript中的Submit函數未運行。

我刪除了以下行：$（'＃myForm'）。val（'imageData'）=“ 2”

已更改：

在graphresult4.php中定義，$ imageData = $ _POST ['imageData'];

document.writeln（'[php] echo $ imageData; [/ php]'）;

結果：

PHP Variable: [example] => let's go

POST Variables
Array ( [value1] => 123 [imageData] => ) 

Script
imageData = [ php] echo $imageData; [/php]

imageData再次為空。

Answer 1

Remove this -> $('#myForm').val('imageData') = "2";

Add document.getElementById('imageData').value="test"; before submit, 
In graphresult4.php define, 
$imageData = $_POST['imageData']; 

document.writeln('[ php] echo $imageData; [/php]');

希望這可以幫助

通過表格將Chartjs從Javascript保存到PHP

問題描述

1 個解決方案

解決方案1
0 2017-11-29 13:52:25

通過表格將Chartjs從Javascript保存到PHP

問題描述

1 個解決方案

解決方案1 0 2017-11-29 13:52:25

解決方案1
0 2017-11-29 13:52:25