amcharts 導出無法使用 framework7

Question

我在framework7中使用amcharts。 我從服務器獲取圖表的數據並正確顯示。 但是當我想導出圖表時，沒有任何事情發生，好像有什么東西阻止了圖表導出為圖像。 我有兩個 javascript 文件。 在 app.js 中我初始化了圖表，在 fuctions.js 中我編寫了圖表代碼。 初始化圖表一切正常，效果很好。 唯一不起作用的是導出部分。 我認為 app.js 中的某些內容阻止了它的導出，因為我嘗試了沒有它的示例代碼並且它有效。 任何人都可以幫助解決這個問題嗎？ 應用程序.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);
}
}

Answer 1

也許您正試圖在頁面實際呈現給 dom 之前呈現圖表。 嘗試在 pageAfterIn 上渲染圖表