AmCharts：导出的图表只有背景网格答案

【问题标题】：AmCharts: Exported charts has only background gridAmCharts：导出的图表只有背景网格
【发布时间】：2019-03-20 09:56:35
【问题描述】：

我有一个生成条形图的 js 文件，我想将其转换为 base64。我为此使用 AmCharts 3。到目前为止，条形图确实可以正确呈现，但 base64 输出仅显示背景网格。

由于某种原因，这些条被平移到最右边。

这是我的 js 文件：

var dataProvider = randomYear();
var chart = AmCharts.makeChart("chartdiv",
    {
        "type": "serial",
        "categoryField": "category",
        "startDuration": 1,
        "export": {
            "enabled": true,
        },
        "categoryAxis": {
            "gridPosition": "start"
        },
        "trendLines": [],
        "graphs": [
            {
                "balloonText": "[[title]] of [[category]]:[[value]]",
                "fillAlphas": 1,
                "id": "AmGraph-1",
                "title": "Latest year",
                "type": "column",
                "valueField": "column-1"
            },
            {
                "balloonText": "[[title]] of [[category]]:[[value]]",
                "fillAlphas": 1,
                "id": "AmGraph-2",
                "title": "Previous year",
                "type": "column",
                "valueField": "column-2"
            }
        ],
        "guides": [],
        "valueAxes": [
            {
                "id": "ValueAxis-1",
                "title": "Pax"
            }
        ],
        "allLabels": [],
        "balloon": {},
        "legend": {
            "enabled": true,
            "useGraphSettings": true
        },
        "titles": [
            {
                "id": "Title-1",
                "size": 15,
                "text": ""
            }
        ],
        "dataProvider": dataProvider
    }
);

chart.addListener( "rendered", function( e ) {

    // WAIT FOR FABRIC
    var interval = setInterval( function() {
      if ( window.fabric ) {
        clearTimeout( interval );

        // CAPTURE CHART
        e.chart["export"].capture( {}, function() {

          // SAVE TO JPG
          this.toPNG( {}, function( data ) {
            // LOG IMAGE DATA
            console.log( data );
          } );
        } );
      }
    }, 100 );

  } );

randomYear 只是一个生成随机数据的函数，这些数据将显示在网格中。

由于启用了导出，当我单击下载按钮时，我得到了正确的条形图，但是当我从控制台复制 base64 文本文件并检查它时，我只得到背景网格。

那么我做错了什么？

编辑这里是 randomYear 函数：

function randomYear() {
    var years = ["JAN", "FEB", "MAR", "APR", "MAI", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]
    var year = [];
    for (var j = 0; j < 12; j++) {
        year.push(


            {
                "category": years[j],
                "column-1": Math.floor((Math.random() * 1000) + 100),
                "column-2": Math.floor((Math.random() * 1000) + 100)
            });
    }
    return year;
}

【问题讨论】：

你能分享randomYear的代码吗？它是运行 ajax 还是异步的？
@WhiteHat，我添加了randomYear函数，没有异步
@WhiteHat，感谢您指出异步，这确实是问题所在。我只是将渲染后的等待时间更改为 2 秒，它就起作用了。你想发布一个答案，我会标记为。

标签： javascript html charts amcharts

【解决方案1】：

问题是由于图表中的动画造成的。 rendered 并不代表动画完成，只是表示渲染过程已经完成，而其他事情仍在进行中（包括动画）。您需要设置时间间隔来解决它 (startDuration * 1000) 或改用 animationFinished 事件。此外，我强烈建议将 rendered、drawn 和 animationFinished 之类的事件放在 makeChart 调用中，因为 makeChart 也异步运行，您可能会遇到处理程序被添加的问题在它触发后：

AmCharts.makeChart("...", {
 // ...
 "listeners": [{
  "event": "animationFinished",
  "method": function(e) {
    // WAIT FOR FABRIC
    var interval = setInterval( function() {
      if ( window.fabric ) {
        clearTimeout( interval );

        // CAPTURE CHART
        e.chart["export"].capture( {}, function() {

          // SAVE TO JPG
          this.toPNG( {}, function( data ) {
            // LOG IMAGE DATA
            console.log( data );
          } );
        } );
      }
    }, e.chart.startDuration * 1000);
  }
});

【讨论】：