11

ハイチャートグラフを取得し、それのbase64表現を取得する方法はありますか？

つまり、最初にPNGまたはJPGにエクスポートして（どちらでも構いません）、次にその画像のbase64文字列を取得するのと同じです。

4

3 に答える 3

9

これが私がそれを解決する方法です：

  • use google canvg SVGファイルまたはSVGファイルのテキストへのURLを取得し、JavaScriptで解析して、結果をCanvas要素にレンダリングします。

  • を使用してチャートsvgをキャンバスにレンダリングします

     canvg(document.getElementById('canvas'),getSVG());

  • キャンバスにあるものを画像に変換します

      var canvas = document.getElementById("canvas") ; 
  var img = canvas.toDataURL("image/png"); //img is data:image/png;base64
   img = img.replace('data:image/png;base64,', '');

  • 画像を非表示フィールドにレンダリングする

      $("hidden field").val(img) ;

  • この文字列をバイト配列に変換するには

     Dim imageFile() As Byte = Convert.FromBase64String(YOUR HIDDEN FIELD .Value)

アップデート

ハイチャートSVGを取得する

  • chart.getSVG()メソッドを使用する

Highcharts API

jsFiddleの例

  • または単に使用する$(your svg).html()
于 2012-07-18T12:50:41.743 に答える
3

まず、highchartsファイルのエクスポートに関するドキュメントを参照してください。これにより、必要な画像URLへの文字列が提供されます。

エクスポート：http ：//www.highcharts.com/ref/#exporting

HTTPリクエスト（たとえば、AJAXを使用）を使用して、ファイルのバイナリコンテンツ（jpg / png）を取得し、次のようなbase64エンコーディングライブラリに転送します。

Base64：http ://www.webtoolkit.info/javascript-base64.html

楽しんで頑張ってください！

于 2012-07-17T20:50:20.013 に答える
0

リクエストで必要なパラメータを渡すことにより、 http： //export.highcharts.comからbase64を直接取得できます。

let chartData = {
        infile: CHART_DATA,
        b64: true // Bool, set to true to get base64 back instead of binary.
        width: 600,
        constr : "Chart"
    }

以下のスニペットを使用してbase64を取得できます

fetch("https://export.highcharts.com/", {
  "headers": {
    "content-type": "application/json",
  },
  "body": "{\"infile\":\"{\\n    \\\"xAxis\\\": {\\n        \\\"categories\\\": [\\n            \\\"Jan\\\",\\n            \\\"Feb\\\",\\n            \\\"Mar\\\",\\n            \\\"Apr\\\",\\n            \\\"May\\\",\\n            \\\"Jun\\\",\\n            \\\"Jul\\\",\\n            \\\"Aug\\\",\\n            \\\"Sep\\\",\\n            \\\"Oct\\\",\\n            \\\"Nov\\\",\\n            \\\"Dec\\\"\\n        ]\\n    },\\n    \\\"series\\\": [\\n        {\\n            \\\"data\\\": [1,3,2,4],\\n            \\\"type\\\": \\\"line\\\"\\n        },\\n        {\\n            \\\"data\\\": [5,3,4,2],\\n            \\\"type\\\":\\\"line\\\"\\n        }\\n    ]\\n}\\n\",\"width\":600,\"constr\":\"Chart\",\"b64\":true}",
  "method": "POST",
  "mode": "cors"
}).then(function(response) {
    // The response is a Response instance.
    return response.text();
  }).then(function(data) {
    console.log(data);  //  base64 data
  }).catch(function(err) { console.log(err);})

于 2021-08-25T13:10:14.927 に答える