Amchart - 導出到 PNG 文件

Question

我創建了一個 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");
                });

Answer 1

在將圖表寫入 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 格式下載。

Answer 2

試試這個代碼：

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

並且不要忘記包含所需的導出插件！