简体   繁体   中英

Amchart - Export to PNG file

I created an amchart for plotting time based area. I need to add an export to image option to this graph. Below shows my amchart code. What are the lines needed to add the export to image option to this graph




    AmCharts.ready(function () {
                    // first we generate some random data
                    generateChartData();

                    // SERIAL CHART
                    chart = new AmCharts.AmSerialChart();
                    chart.pathToImages = "../amcharts/images/";
                    chart.dataProvider = chartData;
                    chart.categoryField = "date";

                    // data updated event will be fired when chart is first displayed,
                    // also when data will be updated. We'll use it to set some
                    // initial zoom
                    chart.addListener("dataUpdated", zoomChart);

                    // AXES
                    // Category
                    var categoryAxis = chart.categoryAxis;
                    categoryAxis.parseDates = true; // in order char to understand dates, we should set parseDates to true
                    categoryAxis.minPeriod = "mm"; // as we have data with minute interval, we have to set "mm" here.            
                    categoryAxis.gridAlpha = 0.07;
                    categoryAxis.axisColor = "#DADADA";

                    // Value
                    var valueAxis = new AmCharts.ValueAxis();
                    valueAxis.gridAlpha = 0.07;
                    valueAxis.title = "Unique visitors";
                    chart.addValueAxis(valueAxis);

                    // GRAPH
                    var graph = new AmCharts.AmGraph();
                    graph.type = "line"; // try to change it to "column"
                    graph.title = "red line";
                    graph.valueField = "visits";
                    graph.lineAlpha = 1;
                    graph.lineColor = "#d1cf2a";
                    graph.fillAlphas = 0.3; // setting fillAlphas to > 0 value makes it area graph
                    chart.addGraph(graph);

                    // CURSOR
                    var chartCursor = new AmCharts.ChartCursor();
                    chartCursor.cursorPosition = "mouse";
                    chartCursor.categoryBalloonDateFormat = "JJ:NN, DD MMMM";
                    chart.addChartCursor(chartCursor);

                    // SCROLLBAR
                    var chartScrollbar = new AmCharts.ChartScrollbar();

                    chart.addChartScrollbar(chartScrollbar);

                    // WRITE
                    chart.write("chartdiv");
                });

You should just be able to add the following before you write the chart to the DIV.

"exportConfig":{
    "menuTop": 0,
    menuItems: [{
        textAlign: 'center',
        icon: 'images/graph_export.png',
        iconTitle: 'Save chart as an image',
        onclick:function(){},
        items: [
            {title:'JPG', format:'jpg'},
            {title:'PNG', format:'png'},
            {title:'SVG', format:'svg'}
        ]
    }]
}

This will give you a download icon on the graph to download in either JPG, PNG or SVG formats.

Try this code :

chart.export = {
enabled: true,
position: "bottom-right"
}
chart.initHC = false;
chart.validateNow();

And don't forget to include the needed export plugin!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM