将div或svg转换为datauri

我已经基本创建了一个FIDDLE并制作了一个示例图表。将div或svg转换为datauri

这是图表

var chart = c3.generate({ 
    data: { 
     json: [{ 
      date: '2014-01-01', 
      upload: 200, 
      download: 200, 
      total: 400 
     }, { 
      date: '2014-01-02', 
      upload: 100, 
      download: 300, 
      total: 400 
     }, { 
      date: '2014-02-01', 
      upload: 300, 
      download: 200, 
      total: 500 
     }, { 
      date: '2014-02-02', 
      upload: 400, 
      download: 100, 
      total: 500 
     }], 
     keys: { 
      x: 'date', 
      value: ['upload', 'download'] 
     } 
    }, 
    axis: { 
     x: { 
      type: 'timeseries', 
      tick: { 
       format: function (x) { 
        if (x.getDate() === 1) { 
         return x.toLocaleDateString(); 
        } 
       } 
      } 
     } 
    } 
});

我试图在此图表转换到一个datauri，我可以用它来绘制图像的代码。我想知道做这件事的最好方法是什么？

我做了研究，发现以下approach但我无法成功实现它。任何帮助这个问题，将不胜感激。

来源

2016-03-07 user1010101

你真的需要向我们展示你的datauri实施到目前为止，我们可以看到你要去哪里错了。 –

@RobertLongson提供的答案是我所做的，因为你可以看到颜色丢失 – user1010101

没有代码可以在你的小提琴中创建数据uri。 –

要使svg成为图像，首先需要在画布上绘制它，然后从画布中获取dataUrl。我编辑你的小提琴，似乎有一些渲染问题，但有主要步骤来做到这一点。

canvg('canvas', document.getElementById('chart').innerHTML); 

// the canvas calls to output a png 
var canvas = document.getElementById("canvas"); 
var img = canvas.toDataURL("image/png");

Link to fiddle

来源

2016-03-07 18:49:05 VahagnNikoghosian

由于某种原因，图像缺少颜色 – user1010101

问题是只有黑色的闭合形状，颜色看起来很好。 – VahagnNikoghosian

如果你看着x轴和y轴的线，它比原始的更加粗体 – user1010101

将div或svg转换为datauri

回答

相关问题