0

私はStackoverflowが初めてで、プログラミングも初めてです..

私のプロジェクトでは、差分チャートを動的に生成しています..

私の要件は、ゲージ チャートの jpeg 機能としてのエクスポートを追加することです。私のプロジェクトの一部として、動的に生成された各チャートのダウンロード ボタンを追加しました。ユーザーがダウンロード ボタンをクリックすると、JPEG イメージ アイコンが表示され、ユーザーがクリックするとそのJPEG画像アイコン、画像をダウンロードする必要があります..

私のチャートコードは次のとおりです。

<div id="podContent_0" class="widget-body chart">
<div id="gaugeCount_0" align="center" style="overflow: hidden;">
<div id="glossyGauge0" style="float: left;padding-right: 5px;" widgetid="glossyGauge0">
<div class="dojoxGaugeContent" style="width: 150px; height: 150px;">
<svg overflow="hidden" width="150" height="150">
........
........
</svg>
</div>
</div>
<div id="glossyGauge1" style="float: left;padding-right: 5px;" widgetid="glossyGauge1">
<div class="dojoxGaugeContent" style="width: 150px; height: 150px;">
<svg overflow="hidden" width="150" height="150">
........
........
</svg>
</div>
</div>
<div id="glossyGauge2" style="float: left;padding-right: 5px;" widgetid="glossyGauge2">
<div class="dojoxGaugeContent" style="width: 150px; height: 150px;">
<svg overflow="hidden" width="150" height="150">
........
........
</svg>
</div>
</div>
</div>
</div>

私のチャートコードにはsvgタグが含まれています。このSVGは初めてです..

この機能にcanvgを使用しました

しかし、次のようなエラーが発生します: エラー: 要素 'parsererror' はまだ実装されていません。canvg.js:2619

私のコードは:

キャンバスを作成しました

<canvas id="myCanvas" width="400px" height="200px"></canvas>

と

var svg = document.getElementById('#podContent_'+i).innerHTML.trim();
var canvas = document.getElementById("myCanvas");
canvg(canvas, svg, { renderCallback: function () {
  var img = canvas.toDataURL("image/png");
  window.open(img);
});

しかし、最後に、次のエラーが表示された空白の画像が表示されます。

エラー: 要素 'parsererror' はまだ実装されていません。canvg.js:2619

誰か助けてください.....

前もって感謝します........

4

3 に答える 3

1

これで解決しました：

var svg = document.querySelector('svg');
var serializer = new XMLSerializer();
var svgString = serializer.serializeToString(svg);
var canvas = document.getElementById("test");
canvg(canvas, svgString);

おかげで: canvg は既に本文に配置された svg では動作しませんか?

于 2015-03-11T14:11:09.153 に答える
1

SVG コンテンツは、ブラウザーで理解されていても、canvg で解析できない可能性があります。

この例のように非常に単純な SVG を使用すると、期待どおりに動作しますか、それともパーサー エラーがスローされますか?

<svg >
   <circle cx="75" cy="75" r="25"  stroke="black"  />
</svg>
于 2013-06-13T14:32:36.090 に答える
0

これを試して ：

var svg = document.getElementById('#podContent_'+i).innerHTML.trim().replace('&nbsp;',' ');

XML Parser が&nbsp;嫌いで、GWT Chart 形式の番号ラベル付き&nbsp;(例1000: svg 要素に次のように記述している : 1&nbsp;000)

于 2014-09-25T08:27:01.707 に答える