將Highcharts畫布呈現爲頁面上的PNG

我正在使用HighCharts庫來生成一些動態圖表。但是，我想將HighCharts畫布元素呈現爲PNG圖像，以便用戶可以將圖表複製並粘貼到電子郵件等中，而無需使用導出功能。將Highcharts畫布呈現爲頁面上的PNG

具體來說，我試圖創建一個包含圖表的HTML電子郵件模板，並希望用戶能夠選擇所有>複製/粘貼到他們的電子郵件客戶端而不是複製/粘貼，導出圖像，然後找到一種將其插入電子郵件的方法。

我找到了這個：Capture HTML Canvas as gif/jpg/png/pdf?，但代碼似乎沒有渲染圖像到文檔。

來源

2012-01-24 Ben Wilson

最近版本的高圖使用SVG而不是HTML5畫布呈現：http：//www.highcharts.com/component/content/article/2-news/12-highcharts-goes-svg – Mark

這是基於PhantomJS的服務器端解決方案。您可以使用JSONP對image.vida.io進行跨域調用。

http://image.vida.io/

您的圖表/可視需要從外部訪問。您可以將憑據傳遞給URL。

http://image.vida.io/api/https%3A%2F%2Fvida.io%2Fdocuments%2FWgBMc4zDWF7YpqXGR/viewport_width=980&viewport_height=900&delay=5000&selector=%23canvas

然後你就可以用img標籤顯示的圖像：

<img src="data:image/png;base64, [base64 data]"/>

它可以跨瀏覽器。

來源

2013-12-02 18:54:29

Here's a hack如果你有心開始使用HighCharts。它使用canvg將SVG解析爲畫布，然後將畫布轉換爲PNG。

chart = new Highcharts.Chart({ 
     
    chart: { 
        renderTo: 'container' 
    }, 
     
    title: { 
        text: '' 
    }, 
     
    xAxis: { 
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 
     
    series: [{ 
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]         
    }], 
     
    navigation: { 
        buttonOptions: { 
            align: 'center' 
        } 
    } 
}); 

canvg(document.getElementById('canvas'), chart.getSVG()) 
     
var canvas = document.getElementById("canvas"); 
var img = canvas.toDataURL("image/png"); 

document.write('<img src="'+img+'"/>');

來源

2012-01-25 03:36:16 Mark

這太棒了;假設要求在POS Internet Explorer中正常工作將會太多。它不會在Outlook中呈現（當然）。再次感謝你的幫助。 –

我在想也許我可以使用一種有點kludgy的方法將結果PNG文件保存到服務器，然後運行cron腳本來訪問該頁面，以便更新的圖像將被例行保存，然後我將加載一個不同的頁面與來自服務器的圖像。我發現這個：http：// stackoverflow。com/questions/7291183/decode-a-canvas-todataurl - 但沒有關於如何通過canvas.toDataURL（）的說明。輸出到一個PHP變量，並保存一個服務器 –

我使用的角度，同時轉換我得到錯誤，你可以請幫助http://stackoverflow.com/questions/19245398/how-to-convert-highchart-to-binary-圖片/ 19245522？noredirect = 1＃comment28488385_19245522 – Prashobh

我知道這現在是一個老問題，但由於它在谷歌搜索結果想出了＃1對我來說，我認爲這是值得一提的是，現在Highcharts和natively supports a server-side image generation script它的偉大工程。

來源

2013-02-07 05:35:51 jkraybill

真棒....請原諒我的天真，但有沒有一些類型的教學指導設置了這個？看起來這是對工具的解釋，而不是設置指南，但也許我錯過了一些明顯的東西。 –

看起來好像還沒有核心文檔中的章節。但是，我使用了我所指的頁面作爲指導，並發現它非常簡單。所有的組件基本上都是免配置的，它的工作原理就像是開箱即用。 – jkraybill

如果你想要更多的指導，我還建議與高層支持人員交談 - 他們非常敏感。 – jkraybill

與「Render charts on the server」（從jkraybills answer）的信息，我已經使用Ajax獲得尚未呈現圖表的圖像，並在img - 標籤顯示它創造了這個小例子。

HTML：

<img id="chart" style="width: 600px;" />

的Javascript：

// Regular chart options 
var options = { 
    title: { 
     text: 'My chart' 
    } 
    ... 
} 

//URL to Highcharts export server 
var exportUrl = 'http://export.highcharts.com/'; 

//POST parameter for Highcharts export server 
var object = { 
    options: JSON.stringify(options), 
    type: 'image/png', 
    async: true 
}; 

//Ajax request 
$.ajax({ 
    type: 'post', 
    url: exportUrl, 
    data: object, 
    success: function (data) { 
     // Update "src" attribute with received image URL 
     $('#chart').attr('src', exportUrl + data); 
    } 
});

正如this JSFiddle demonstration。

POST參數的其餘部分（width，callback ...）爲in the documentation。

來源

2014-07-31 14:16:01

你好，謝謝你的解決方案，它就像一個魅力。是否有可能將圖像保存在瀏覽器中直接發送到服務器？ THX歡呼 – achillix

將Highcharts畫布呈現爲頁面上的PNG

回答

相關問題