Amchart-导出到PNG文件

Amchart - Export to PNG file

本文关键字:PNG 文件 Amchart-      更新时间:2023-09-26

我创建了一个用于绘制基于时间的区域的amchart。我需要在此图中添加导出到图像选项。下面显示了我的amchart代码。将导出到图像选项添加到此图形需要哪些行



    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");
                });

在将图表写入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'}
        ]
    }]
}

这将在图形上提供一个下载图标,以JPG、PNG或SVG格式下载。

试试这个代码:

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

别忘了包含所需的导出插件!