티스토리 뷰
export
Link)
https://www.amcharts.com/docs/v3/tutorials/exporting-charts-and-maps-to-images-or-pdf/
https://github.com/amcharts/export
https://www.amcharts.com/kbase/export-specific-dataset-to-xlsx-json-or-csv/
code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | <!-- amchart --> <script type='text/javascript' src='/common/js/amcharts/amcharts.js'></script> <script type='text/javascript' src='/common/js/amcharts/serial.js'></script> <script type='text/javascript' src="/common/js/amcharts/plugins/export/export.min.js"></script> <link rel="stylesheet" href="/common/js/amcharts/plugins/export/export.css" type="text/css" media="all" /> /////////////////////////////////////////////////////////////////////////////////////////////// // // 내보내기 // 2018.12.07.금요일 허정진 // //////////////////////////////////////////////////////////////////////////////////////////////// "export": { "enabled": true, // "menuReviver": function(item,li) { // if (item.format == "XLSX") { // item.name = "sheet"; // } // return li; // }, // 값을 comma(,) 처리 하기위해서 데이터를 다 뒤져보자 "processData": function(data, cfg){ for(var i=0; i<data.length; i++){ // 오브젝트검사 : 데이터 안에 속성이 존재하고 && 타입이 number 인것만 골라낸다 // 주의!!. columnNames 로 인해서 속성이름이 UTF-8 로 바뀌었으니 속성접근자를 dot(.) 이아닌 [] 로 접근 for( var property in data[i] ){ if( true == data[i].hasOwnProperty( property ) && "number" == typeof data[i][property] ){ // 존재하는 number를 => 소수점2자리로변환 => string으로 형변환 => 3자리마다 콤마(,)찍는다 data[i][property] = data[i][property].toLocaleString(); //data[i][property] = data[i][property].toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //data[i][property] = NumberToSize(data[i][property], "bps", 2); // bps Kbps, Mbps... } } } return data; }, "libs": { //"path": "https://www.amcharts.com/lib/3/plugins/export/libs/" //"path": "../common/js/amcharts/plugins/export/libs/", }, "dateFormat": "YYYY-MM-DD HH:NN:SS", // 컬럼 rename 맵핑 "exportTitles": true, "columnNames": { "time": "날짜", "total": "데이터" }, // TODO : 보여지는 필드를 직접지정 => 순서가 없는경우 time을 맨첫번째로, total을 맨 뒤로 옮겨야한다 // "exportFields": [ // "time", // "total", // ], // 파일이름 지정 "fileName":"chartdata", "menu":[{ "class":"export-main", "format":"XLSX", "dateFormat": "YYYY-MM-DD HH:NN:SS", "withHeader" : true, "stringify:" : false, "menu":[{ "label":"다운로드 데이터", "menu":["XLSX", "CSV"] },{ "label": "다운로드 이미지", "menu":["PNG","JPG","SVG"] },{ "label": "그림그리기", "action":"draw", "menu": [ { "class": "export-drawing", "menu": [ { "label": "Edit", "menu": [ "UNDO", "REDO", "CANCEL" ] }, { "label": "Save", "format": "PNG" } ] } ] }] }] }, // end. export /////////////////////////////////////////////////////////////////////////////////////////////// //amchart 객체에 접근하여 속성 컨트롤 amchartPeriodClass.amchart.export.config.columnNames.total = "Total (bps)"; amchartPeriodClass.amchart.export.config.fileName = "TrafficDaily"; | cs |
result)
'■ 프론트엔드 ■ > Amchart' 카테고리의 다른 글
startEffect (0) | 2018.11.14 |
---|
댓글