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

试试这段代码：

{{1}}

不要忘记包含所需的导出插件！

Amchart - 导出到PNG文件

2 个答案: