2

いくつかのデータといくつかのハイチャートを含むページがあります。Highcharts には、グラフを画像としてエクスポートするための優れた機能がいくつかあります。チャートとデータを含む 1 つの大きな画像または PDF が存在するように、テーブルまたは div の内容をチャートと共にエクスポートするにはどうすればよいですか? 私がこれまでに試したことはどれも理想的ではありませんが、次のとおりです。

html2canvas が最適なソリューションのようですが、Highcarts が含まれていないようです。ドキュメンテーションが良くないようで、グラフを含む Goggling から良い例を見つけることができなかったので、私は何か間違ったことをしているのかもしれません。

私が見つけた 2 番目に優れた解決策は、ハイチャートにデータを含めることです。この例は次の場所にあります: http://jsfiddle.net/highcharts/z9zXM/ これは動作する可能性がありますが、ページの現在のフォーマットを破壊します。言い換えれば、それは醜い解決策になるでしょう:)。

私が見つけた他の解決策はスクリーンショットに関するものですが、これではページ全体をキャプチャできません。

存在する場合と存在しない場合がある理想的な解決策は、何らかの方法で JavaScript を使用して div またはテーブルを Highchart と組み合わせて pdf または jpg にすることです。

4

2 に答える 2

0

ネイティブの Highcharts エクスポート機能を html2canvas と組み合わせてみませんか?

まず、ハイチャートをファイルにエクスポートします。画像を取得するために呼び出す必要がある URL を知っていれば十分だと思います。

次に、標準の html2canvas マジックを使用して、グラフのないドキュメントを作成します。(エクスポートされたファイルで折りたたまれないように、チャートで div の幅と高さを指定する必要がある場合があります)。

最後に、gd または imagemagick を使用して別のものに貼り付け、クライアントに返します。

于 2012-08-03T17:33:36.397 に答える
0

このコードを使用して、html2canvas で div ID を定義する必要がある特定の領域のスクリーンショットをキャプチャするのは簡単です。ここで 2 div-:

div id="car"
div id ="chartContainer"
を使用しています。車のみをキャプチャする場合は、 carを使用します。ここでは car のみをキャプチャします。グラフ html2canvas ($( '#car') このコードをコピーして貼り付けます

<html>
    <head>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script>
    window.onload = function () {
    
    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        theme: "light2",
        title:{
            text: "Simple Line Chart"
        },
        axisY:{
            includeZero: false
        },
        data: [{        
            type: "line",       
            dataPoints: [
                { y: 450 },
                { y: 414},
                { y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle" },
                { y: 460 },
                { y: 450 },
                { y: 500 },
                { y: 480 },
                { y: 480 },
                { y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross" },
                { y: 500 },
                { y: 480 },
                { y: 510 }

            ]
        }]
    });
    chart.render();
    
    }
</script>
</head>

<body bgcolor="black">
<div id="wholebody">  
<a href="javascript:genScreenshotgraph()"><button style="background:aqua; cursor:pointer">Get Screenshot of Cars onl </button> </a>

<div id="car" align="center">
    <i class="fa fa-car" style="font-size:70px;color:red;"></i>
    <i class="fa fa-car" style="font-size:60px;color:red;"></i>
    <i class="fa fa-car" style="font-size:50px;color:red;"></i>
    <i class="fa fa-car" style="font-size:20px;color:red;"></i>
    <i class="fa fa-car" style="font-size:50px;color:red;"></i>
    <i class="fa fa-car" style="font-size:60px;color:red;"></i>
    <i class="fa fa-car" style="font-size:70px;color:red;"></i>
</div>
<br>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="box1">
</div>
</div>>
</body>

<script>

function genScreenshotgraph() 
{
    html2canvas($('#car'), {
        
      onrendered: function(canvas) {

        var imgData = canvas.toDataURL("image/jpeg");
        var pdf = new jsPDF();
        pdf.addImage(imgData, 'JPEG', 0, 0, -180, -180);
        pdf.save("download.pdf");
        
      
      
      }
     });

}

</script>

</html>

于 2018-08-19T12:33:01.133 に答える