javascript - AmCharts:导出的图表只有背景网格

Question

我有一个生成条形图的 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;
}

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