如何从外部按钮导出图形AmCharts

Question

目前图形内部有一个导出按钮，是AmCharts默认选项，但我需要从外部按钮进行导出。

示例:' exportConfig: {menuTop:"21 px",menuBottom:"汽车",menuRight:"21 px",写成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/

我需要的功能导出按钮点击页面内，但离开图表。

Answer 1

当然可以，您可以像这样手动创建导出实例。导出回调包含blob(在这种情况下是图像的base64数据串)。

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/

Answer 2

另一件事，当你运行代码时，我在我的代码中看到这个错误。

这是我的代码。

        <?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>

这是error

TypeError: tmp.init is not a function

tmp.init();

Answer 3

请问您为什么不希望导出按钮作为默认方法(图表的一部分)?图标不会随图表一起导出，如果这是您所担心的，您可以将图标放在图形区域之外，这样它就不会干扰正在显示的图形。