2014-05-16 1 views
2

현재 그래프 안에 내보내기 버튼이 있으며, AmCharts 옵션이 기본 설정되어 있지만 외부 버튼에서 설정해야합니다.외부 버튼에서 그래픽 AmChart를 내보내는 방법은 무엇입니까?

예 :`exportConfig : { menuTop : "21px" menuBottom : "자동", menuRight : "21px" 의 backgroundColor : "#efefef"

   menuItemStyle : { 
       backgroundColor   : '#EFEFEF', 
       rollOverBackgroundColor : '#DDDDDD'}, 

       menuItems: [{ 
        textAlign: 'center', 
        icon: 'http://www.amcharts.com/lib/3/images/export.png', 
        onclick:function(){}, 
        items: [{ 
         title: 'JPG', 
         format: 'jpg' 
        }, { 
         title: 'PNG', 
         format: 'png' 
        }, { 
         title: 'SVG', 
         format: 'svg' 
        }] 
       }] 
      } 
     });` 

http://jsfiddle.net/BGuuT/

페이지 내에서 버튼 클릭을 내보내고 차트에서 벗어나는 기능이 필요합니다.

답변

3

가능하면 수동으로 내보내기 인스턴스를 만들 수 있습니다. 내보내기 콜백에는 이미지의 기본 64 데이터 스트림 인 blob이 포함됩니다. 여기

var tmp = new AmCharts.AmExport(chart); 
tmp.init(); 
tmp.output({ 
    output: 'datastring', 
    format: 'jpg' 
},function(blob) { 
    var image = new Image(); 
    image.src = blob; 

    document.body.appendChild(image); 
}); 

업데이트 된 jsfiddle 버전입니다, 난 당신이 코드를 실행하면 내 코드에서이 오류를보고, 내가 그 http://jsfiddle.net/BGuuT/1/

+0

감사합니다. 예제가 완벽하게 작동하지만 클릭을 수행하기 위해 파일을 다운로드하는 방법은 무엇입니까? – user3402286

+0

클릭하면 다운로드 하시겠습니까? http://jsfiddle.net/BGuuT/2/ –

+0

"datastring"을 "save"로 바꾸지 만 amcharts_combined 파일에 포함 된 filesaver.js가 필요합니다. http://jsfiddle.net/maertz/BGuuT/3/ – Maertz

0

또 다른 것은 당신을 도울 수 있기를 바랍니다.

이것은 내 코드입니다.

 <?php 
    session_start(); 
    require_once('../../core.php'); 
    ?> 
    <script type="text/javascript"> 
    AmCharts.loadJSON = function(url) { 
     // create the request 
     if (window.XMLHttpRequest) { 
     // IE7+, Firefox, Chrome, Opera, Safari 
     var request = new XMLHttpRequest(); 
     } else { 
     // code for IE6, IE5 
     var request = new ActiveXObject('Microsoft.XMLHTTP'); 
     } 

     // load it 
     // the last "false" parameter ensures that our code will wait before the 
     // data is loaded 
     request.open('GET', url, false); 
     request.send(); 

     // parse adn return the output 
     return eval(request.responseText); 
    }; 
    </script> 


    <div id="chartdiv"></div> 

    <input type="button" name="JPG" id="JPG" value="JPG" /> 




    <script> 
    var graphData = AmCharts.loadJSON('Aplicacion/MGI/generaGraph.php?option=3&instancia=40'); 
    var chartData = AmCharts.loadJSON('Aplicacion/MGI/generaData.php?instancia=40&FiltroIC=1&FiltroCA=1&FiltroIICG=1'); 
    var chart = AmCharts.makeChart("chartdiv", { 
       "graphs": graphData, 
       "pathToImages": "Aplicacion/MGI/amchart/images/", 
       "dataProvider": chartData, 
       "type": "serial", 
       "theme": "light", 
       "startDuration": 0.8, 
       "legend": {   
        "position": "bottom", 
        "fontSize": 9 
       }, 
       "valueAxes": [{ 
        "stackType": "regular", 
        "fontSize": 9, 
        "ignoreAxisWidth": true    
       }], 
       "marginLeft": 40, 

       "chartcrollbar": {}, 
       "chartCursor": { 
        "cursorPosition": "mouse" 
       }, 
       "categoryField": "EjeX", 
       "categoryAxis": { 
        "gridPosition": "start", 
        "fillAlpha": 0.05, 
        "labelsEnabled":1, 
        "fillColor": "#000000", 
        "fontSize": 9, 
        "labelRotation": 45 
       } 
      }); 
     var btn = document.getElementById('JPG'); 
    btn.onclick = function() { 
    var tmp = new AmCharts.AmExport(chart); 
    tmp.init(); 
    tmp.output({ 
     output: 'datastring', 
     format: 'jpg' 
    },function(blob) { 
     var image = new Image(); 
     image.src = blob; 
     document.body.appendChild(image); 
    }); 
} 
    } 




    </script> 

그리고 이것은 기본 방법 (차트의 일부) 될 수있는 수출 버튼을하지 않는 이유

TypeError: tmp.init is not a function 


tmp.init(); 
0

내가 물어 봐도 오류가? 아이콘이 차트와 함께 내보내지지 않습니다. 걱정되는 부분이고 아이콘을 그래프 영역 밖으로 가져 가면 표시되는 그래프를 방해하지 않습니다.

+0

For 저에게 문제는 전체 웹 사이트의 디자인입니다. 모든 버튼 (편집, 삭제, ...)이 특정 디자인을 갖고 있다면, 나는 같은 디자인을 내보내기 메뉴에 적용해야합니다. –

관련 문제