0

我有这个代码

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script>
    <script type="text/javascript" src="js/chart-js/Chart.js"></script>
    <script type="text/javascript">
        var data = [
            {
                value: 300,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "Red"
            },
            {
                value: 50,
                color: "#46BFBD",
                highlight: "#5AD3D1",
                label: "Green"
            },
            {
                value: 100,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "Yellow"
            }
        ];

        $(document).ready( 
            function () {
                var ctx = document.getElementById("myChart").getContext("2d");
                var myNewChart = new Chart(ctx).Pie(data);
                document.getElementById("canvas_link").src = document.getElementById("myChart").toDataURL();                 
            }
        );
    </script>
</head>
<body>
    <p><a href="#" id="canvas_link">save as image</a></p>
    <canvas id="myChart" width="400" height="400"></canvas>
    <p><a href="">export to pdf</a></p>
</body>

我需要创建 pdf 导出并使用通用图添加到图像中。Berofe 我必须保存渲染图像。我尝试使用方法 .toBase64Image() 但我不知道我可以开始。

我的继续

创建 canvas_link (.toDataUrl)。单击另存为图像后，我可以放大并将图像上传到服务器。然后我可以生成 pdf 导出（跨 mPDF）并将 imageto 添加到导出中。我可以创建，但我不知道创建图形图像并将其上传到服务器。

我需要来自http://www.chartjs.org/docs/的更多示例

4

2 回答 2

4

在这种情况下，您不需要上传为图片。您可以将调用 toDataUrl 函数的结果放在隐藏字段的值中，并以表单（以 iframe 作为目标）或通过 ajax 调用发送

在图表中使用以下选项

//new options var
var options = {
    bezierCurve : false,
    //animation: false
    onAnimationComplete: done
};

//your code with a little modification
$(document).ready( 
    function () {
        var ctx = document.getElementById("myChart").getContext("2d");

        //use the previously defined "options" here!!!
        var myNewChart = new Chart(ctx).Pie(data, options);
    }
);

//callback function, called when the pie ends his animation
function done(){
    //this part of your code was moved here to avoid that store an empty image
    document.getElementById("canvas_link").src = document.getElementById("myChart").toDataURL();

    var postdata={
      file: document.getElementById("myChart").toDataURL()
    }
    $.post( "store.php", postdata)
      .done(function( ret ) {
        console.log( "Data status: Loaded successfully ");
      })
      .fail(function( ret ) {
        console.log( "Data status: error ");
      })
    ;
}

参考：http ://api.jquery.com/jquery.post/

在php中你可以用这种方式处理内容

// file: store.php

// Interpret data uri
$uriPhp = 'data://' . substr($file, 5);
// Get content
$binary = file_get_contents($uriPhp);

$file = 'uploads/charts/'. time() .'.png';

// Save image
file_put_contents($file, $binary);

参考：https ://github.com/nnnick/Chart.js/issues/99#issuecomment-75359927

于 2015-05-21T18:40:28.953 回答
-1

根据文档，您可以通过 API 调用打印或保存图形；

例子

var chart = new CanvasJS.Chart("chartContainer", {
    theme: "theme2",
    title:{
        text: "Print Chart using print() method"              
    },
    data: [              
    {
        type: "column",
        dataPoints: [
            { label: "apple",  y: 10  },
            { label: "orange", y: 15  },
            { label: "banana", y: 25  },
            { label: "mango",  y: 30  },
            { label: "grape",  y: 28  }
        ]
    }
    ]
});

chart.render();
document.getElementById("printChart").addEventListener("click",function(){
    chart.print();
    //chart.exportChart({format: "jpg"});
});
于 2017-01-25T06:26:18.363 回答