วิธีทำให้ highcharts รองรับการ export ข้อความภาษาไทย ผ่าน canvas
เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdeeภาษาไทย กราฟ highcharts export
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ภาษาไทย กราฟ highcharts export
ดูแล้ว 8,386 ครั้ง
UPDATE! อัพเดทล่าสุด 23-03-2020
- ปัจจุบันไม่จำเป็นต้องปรับแต่งเพิ่ม เพื่อให้รองรับภาษาไทย ใช้รูปแบบจากบทความ http://niik.in/641 แทนได้เลย
- ปัจจุบันไม่จำเป็นต้องปรับแต่งเพิ่ม เพื่อให้รองรับภาษาไทย ใช้รูปแบบจากบทความ http://niik.in/641 แทนได้เลย
ไปที่ Copy
เนื้อหาส่วนนี้เป็นแนวทางในการ export กราฟ จากการใช้งาน highcharts เป็น
ไฟล์รูปภาพ นามสกุล png โดยให้สามารถรองรับภาษาไทย โดยบราวเซอร์ที่รองรับ
จะเป็นในส่วนของ chrome กับ firefox
ที่มาฟังก์ชั่น การ export ด้วย HTML5 canvas
ดูบราวเซอร์ที่สนับสนุน Download attribute
วิธีการ
สร้างไฟล์ export-th.js แล้ว copy โค้ดตามนี้
/** * Experimental Highcharts plugin to allow download to PNG (through canvg) and SVG * using the HTML5 download attribute. * * WARNING: This plugin uses the HTML5 download attribute which is not generally * supported. See http://caniuse.com/#feat=download for current uptake. * * TODO: * - Find a flowchart at Dropbox\Highsoft\Teknisk\Docs. The flowchart has not been updated to fit the new logic of implementing FileSaver ourselves. * - Existing code was abandoned in the middle of a revamp, probably needs cleanup. * - Implement "FileSaver.js"-like functionality for cross-browser support. Where Blob would need to be pulled in (old FF/Opera/Safari), emit error msg. * - Option to fall back to online export server on missing support. Display error to user if option disabled and there is no support. */ (function (Highcharts) { // Dummy object so we can reuse our canvas-tools.js without errors Highcharts.CanVGRenderer = {}; /** * Downloads a script and executes a callback when done. * @param {String} scriptLocation * @param {Function} callback */ function getScript(scriptLocation, callback) { var head = document.getElementsByTagName('head')[0], script = document.createElement('script'); script.type = 'text/javascript'; script.src = scriptLocation; script.onload = callback; head.appendChild(script); } /** * Add a new method to the Chart object to invoice a local download */ Highcharts.Chart.prototype.exportChartLocal = function (options) { var chart = this, svg = this.getSVG(), canvas, canvasCxt, a, href, extension, createCanvas = function () { canvas = document.createElement('canvas'); canvas.width = svg.match(/^<svg.*?width="(\d+)/)[1]; canvas.height = svg.match(/^<svg.*?height="(\d+)/)[1]; }, download = function () { var blob; a = document.createElement('a'); if (typeof a.download !== 'undefined') { console.log("Downloading using <a>.downlaod") // HTML5 download attribute a.href = href.replace(/#/g, '%23'); // Escape direct # characters. Required in Firefox a.download = 'chart.' + extension; document.body.appendChild(a); a.click(); document.body.removeChild(a); } else { // Here try blob -> objectURL, then data:uri, then fall back to export server/error // IE specific blob implementation if (navigator.msSaveOrOpenBlob) { console.log("Download using msSaveOrOpenBlob") // Get PNG blob if (extension === 'png') { blob = canvas.msToBlob(); // Get SVG blob } else { blob = new MSBlobBuilder; blob.append(svg); blob = blob.getBlob('image/svg+xml'); } navigator.msSaveOrOpenBlob(blob, 'chart.' + extension); } } }, // Function to render SVG to canvas. Calls download() when done. downloadCanvas = function () { var useBlob = navigator.userAgent.indexOf('WebKit') === -1, image = new Image(), domurl, blob, svgurl; extension = 'png'; // Firefox runs Blob. Safari requires the object URL. Chrome accepts both // but seems to be slightly faster with object URL. if (useBlob) { domurl = window.URL || window.webkitURL || window; blob = new Blob([svg], { type: 'image/svg+xml;charset-utf-16'}); svgurl = domurl.createObjectURL(blob); } // This is fired after the image has been created image.onload = function() { canvasCxt.drawImage(image, 0, 0); if (useBlob) { domurl.revokeObjectURL(svgurl); } // Now we try to get the contents of the canvas. try { href = canvas.toDataURL('image/png'); download(); } catch (e) { // Tainted canvas, need canVG if (e.name === 'SecurityError') { // Create new and untainted canvas createCanvas(); if (window.canvg) { console.log("Using preloaded canvg") window.canvg(canvas, svg); href = canvas.toDataURL('image/png'); download(); } else { // Must load canVG first console.log("Loading canVG") chart.showLoading(); getScript(Highcharts.getOptions().global.canvasToolsURL, function () { chart.hideLoading(); window.canvg(canvas, svg); href = canvas.toDataURL('image/png'); download(); }); } } } } image.src = useBlob ? svgurl : 'data:image/svg+xml,' + svg; }; // Initiate download depending on file type if (options && options.type === 'image/svg+xml') { // SVG download href = 'data:' + options.type + ',' + svg; extension = 'svg'; download(); } else { // PNG download // Create an empty canvas of same size as SVG source createCanvas(); // Check if browser supports canvas rendering canvasCxt = canvas.getContext && canvas.getContext('2d'); if (canvasCxt) { downloadCanvas(); } else { console.log("Error, canvas not supported. Fallback to export server."); // TODO! } } }; // Extend the default options to use the local exporter logic Highcharts.getOptions().exporting.buttons.contextButton.menuItems = [{ textKey: 'printChart', onclick: function () { this.print(); } }, { separator: true }, { textKey: 'downloadPNG', onclick: function () { this.exportChartLocal(); } }, { textKey: 'downloadSVG', onclick: function () { this.exportChartLocal({ type: 'image/svg+xml' }); } }]; }(Highcharts));
โค้ตตัวอย่างการใช้งาน
(ไฟล์ chartoptions.js ดูได้ที่ ตัวอย่างบทความ https://www.ninenik.com/content.php?arti_id=641)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Highcharts</title> </head> <body> <div style="width:80%;margin:auto;"> <div id="hc_container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="chartoptions.js"></script> <script src="export-th.js"></script> <script type="text/javascript"> $(function () { $('#hc_container').highcharts( $.extend(chartOptions,{ series:[{"name":"สินค้า A","data":[49,71,106,129,144,176,135,148,216,194,95,54]}] }) ); }); </script> </body> </html>
ตัวอย่าง
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ
เนื้อหาที่เกี่ยวข้อง
-
08 Jun2015แนะนำ highcharts สร้างกราฟง่ายๆ รองรับการ export อ่าน 10,005
Highcharts เป็นระบบกราฟ API ที่มีความยืดหยุ่นและใช้งานง่าย สามารถสร้างกรา
-
09 Jun2015วิธีการกำหนด option ของ highcharts ให้ดูง่ายขึ้น อ่าน 7,092
เทคนิคเนื้อหาส่วนนี้เป็นวิธีการกำหนด option ให้กับ highcharts เพื่อจัดรูป
-
10 Jun2015ดึงข้อมูลจากฐานข้อมูล มาแสดงใน highcharts เบื้องต้น อ่าน 14,406
พิเศษ เฉพาะสมาชิก เนื้อหาในตอนนี้ จะแสดงแนวทางการดึงข้อมูลจากฐานข้อมูล มาแสดงในรูปแบบกราฟด้
-
12 Jun2015เปรียบเทียบสินค้า 2 รายการขึ้นไป แสดงใน highcharts อ่าน 6,368
พิเศษ เฉพาะสมาชิก จากเนื้อหาตอนที่แล้ว เราได้เข้าใจหลักการดึงข้อมูลจากฐานข้อมูลมาสร้าง เป็น
เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก
กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ
ยังไม่เป็นสมาชิก
สมาชิกล็อกอิน
สมาชิกล็อกอิน
( หรือ เข้าใช้งานผ่าน Social Login )
URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน