AmCharts: у экспортированных диаграмм есть только фоновая сетка - PullRequest
Новая
       22

AmCharts: у экспортированных диаграмм есть только фоновая сетка

1 голос
/ 20 марта 2019

У меня есть файл js, который генерирует гистограмму, и я хочу преобразовать его в base64. Я использую AmCharts 3 для этого. Пока гистограмма отображается правильно, но вывод base64 показывает только фоновую сетку.

enter image description here

По какой-то причине полосы переведены в крайнее правое положение.

Вот мой файл 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 - это просто функция, которая генерирует случайные данные, которые будут отображаться в сетке.

Поскольку экспорт включен, когда я нажимаю кнопку загрузки, я получаю правильную гистограмму, которая была отрисована, enter image description here, но когда я копирую текстовый файл base64 из консоли и проверяю его, я только получить фоновую сетку.

Так что я делаю не так?

EDIT Вот функция 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;
}

1 Ответ

2 голосов
/ 20 марта 2019

Проблема связана с анимацией на вашем графике. 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);
  }
});
...