通过表格将Chartjs从Javascript保存到PHP

Question

I'm doing a report and I need to put Graph result inside. 我正在做一个报告，我需要将Graph结果放入其中。

I know about Javascript (Client) and PHP (Server) issue, but I have to fix this. 我知道Javascript（客户端）和PHP（服务器）问题，但是我必须解决此问题。

The main issue: I have to save Graph as a png file to put on my report. 主要问题：我必须将Graph另存为png文件才能放入报告中。

I read almost hundred questions here, but I didn't find the solution. 我在这里阅读了近百个问题，但没有找到解决方案。

To generate a graph I'm using ChartJS. 为了生成图形，我使用的是ChartJS。

I created three files, but I'm not so sure what's wrong. 我创建了三个文件，但是我不确定是怎么回事。

PHP (exemplo4.php) 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>

Javascript 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（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>

To test my example I putted here: 为了测试我的示例，我在这里输入：

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

My problem is: the variable imageData everytime is blank and submit function inside javascript is not running. 我的问题是：变量imageData每次都是空白，并且javascript中的Submit函数未运行。

I removed line: $('#myForm').val('imageData') = "2" 我删除了以下行：$（'＃myForm'）。val（'imageData'）=“ 2”

Changed: 已更改：

In graphresult4.php define, $imageData = $_POST['imageData']; 在graphresult4.php中定义，$ imageData = $ _POST ['imageData'];

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

Result: 结果：

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

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

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

imageData is empty again. 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]');

Hope this helps 希望这可以帮助

通过表格将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