Экспорт amcharts не работает с использованием framework7

Я использую amcharts в framework7. Я получаю данные для своих графиков с сервера, и они отображаются правильно. но когда я хочу экспортировать диаграмму, ничего не происходит, как будто что-то препятствует экспорту диаграмм как изображений. У меня есть два файла для javascript. в app.js я инициализировал диаграмму, а в fuctions.js я написал коды диаграммы. с инициализацией диаграммы все в порядке, и она отлично работает. единственное, что не работает, - это экспортная часть. Я думаю, что что-то в app.js мешает его экспорту, потому что я пробовал образец кода без этого, и он сработал. может кто-нибудь помочь решить эту проблему? app.js:

var theme = 'ios';
if (location.href.indexOf('theme=md') >= 0) theme = 'md';
if (location.href.indexOf('theme=aurora') >= 0) theme = 'aurora';

var plugin = { params: { theme: theme, root: '#app',} };

if (Framework7.use) Framework7.use(plugin);
else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);

var $$ = Dom7;
var view;
var app;

var app = new Framework7({
    root: '#app',
    name: 'OHM Sanaz',
    id: 'ir.ohm.Sanaz',
    view:
{
    pushState: false,
    stackPages: true,
},
});

и часть просмотра:

 view = app.views.create('.view-main', {
    name: "OHMGIS", animate: true, main: true, router: true, pushState: false,
    stackPages: true,
    routes: [
        {
            name: 'home',
            path: '/home/',
            templateUrl: './home.html',
            history: true,
            keepAlive: true,
            options: { transition: 'f7-fade' },
            on:
            {
                pageInit: function (e, page)
                {
                    Init_Page_Home();
              

                },
                pageAfterIn: function (event, page)
                {
            
                },
                pageAfterOut: function ()
                {
       
       
                }
            },
        },
        {
          name: 'charts',
          path: '/charts/',
          templateUrl: './charts.html',
          history: true,
          keepAlive: false,
          options: { transition: 'f7-fade' },
          on: {
              pageInit: function (e, page) {
                Init_Page_Charts();
              },
              pageAfterIn: function (event, page) {

              },
              pageAfterOut: function () {


              }
          },
      },
    ],
});

Маршрутизатор диаграмм, перемещающийся в app.js:

function OnGotoCharts()
{
    view.router.navigate({ name: 'charts' });
}

Часть инициализации диаграммы в app.js:

function ChartPanel(){
Init_Page_Charts();
     CreateXYChart("chartdiv",OMID_Statistical_Object,"Billing_Count","Flag_Type","Bar_Color");
    CreatePieChart("chartdiv",OMID_Statistical_Object,"Billing_Count","Flag_Type","Bar_Color");
}

и код в functions.js:

function CreatePieChart(ID, data, Fld_Value,Fld_Category,Fld_Color)
{ 
    try
    {
    var PieChart_Billing = am4core.create(ID, am4charts.PieChart);
  
// Add data
PieChart_Billing.data = data;

// Add and configure Series
var pieSeries = PieChart_Billing.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value =Fld_Value; 
pieSeries.dataFields.category =Fld_Category; 
pieSeries.slices.template.adapter.add("fill", function (fill, target) {
    return target.dataItem.dataContext["Bar_Color"];
});
pieSeries.slices.template.adapter.add("stroke", function (fill, target) {
    return target.dataItem.dataContext["Bar_Color"];
});

var sliceTemplate = pieSeries.slices.template;
sliceTemplate.strokeWidth = 2;
sliceTemplate.strokeOpacity = 1;

PieChart_Billing.legend = new am4charts.Legend();
// PieChart_Billing.exporting.menu = new am4core.ExportMenu();

}
catch(ex)
{
    alert(ex.message);
}
}

person Depie    schedule 28.11.2020    source источник


Ответы (1)


Возможно, вы пытаетесь визуализировать диаграммы до того, как страница будет фактически отрисована в dom. Попробуйте отобразить диаграммы на pageAfterIn

person Alexey Victorov    schedule 10.12.2020