पेज

Question

पर पीएनजी के रूप में हाइचार्ट्स कैनवास प्रस्तुत करें मैं कुछ गतिशील चार्ट उत्पन्न करने के लिए हाईचर्ट्स लाइब्रेरी का उपयोग कर रहा हूं। हालांकि, मैं उच्चतर कैनवास तत्व को पीएनजी छवि के रूप में प्रस्तुत करना चाहता हूं, जैसे कि उपयोगकर्ता निर्यात फ़ंक्शन का उपयोग किए बिना चार्ट को ईमेल में कॉपी और पेस्ट कर सकता है।

विशेष रूप से, मैं एक HTML ईमेल टेम्पलेट बनाने की कोशिश कर रहा हूं जिसमें चार्ट शामिल है, और चाहते हैं कि उपयोगकर्ता कॉपी/पेस्टिंग के बजाय अपने ईमेल क्लाइंट में कॉपी/पेस्ट करें, छवि का निर्यात करें, फिर ईमेल में इसे सम्मिलित करने का एक तरीका ढूंढना।

मुझे यह मिला है: Capture HTML Canvas as gif/jpg/png/pdf?, लेकिन कोड दस्तावेज़ में एक छवि प्रस्तुत करने के लिए प्रतीत नहीं होता है।

Answer 1

यहां फ़ैंटॉमजेएस के आधार पर एक सर्वर साइड समाधान है। आप image.vida.io पर क्रॉस डोमेन कॉल करने के लिए JSONP का उपयोग कर सकते हैं।

http://image.vida.io/

आपका चार्ट/दृश्य बाहर से सुलभ होना चाहिए। आप यूआरएल को प्रमाण पत्र पास कर सकते हैं।

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]"/> 

यह ब्राउज़र भर में काम करता है।

Answer 2

Here's a hack यदि आपके पास हाईचर्ट्स का उपयोग करने पर आपका दिल सेट है। यह एक कैनवास में एसवीजी को पार्स करने के लिए canvg का उपयोग करता है और फिर कैनवास को पीएनजी में परिवर्तित करता है।

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+'"/>'); 

Answer 3

मैं यह जानता हूँ अब एक पुराने सवाल है, लेकिन चूंकि यह एक Google खोज परिणाम में मेरे लिए # 1 आया था, मुझे लगता है कि अब कि Highcharts उल्लेख natively supports a server-side image generation script लायक है और यह बहुत अच्छा काम करता है।

Answer 4

" Render charts on the server" ( jkraybills answer से) से जानकारी के साथ

, मैं इस कम से कम उदाहरण बनाए जा चुके अजाक्स का उपयोग कर एक चार्ट है कि गाया नहीं किया गया की एक छवि प्राप्त करने के लिए, और एक img -tag पर प्रदर्शित करना।

HTML:

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

जावास्क्रिप्ट:

// 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 में के रूप में।

बाकी पोस्ट पैरामीटर (width, callback ...) in the documentation हैं।