如何在Android上导出Highstock / Highcharts图表？

Posted 2021-05-05

我使用Highstock构建了一个图表，它在Chrome中正常运行。我可以导出通常在Chrome中生成的图表。但是当我在android上测试时，“图表导出”不起作用。该图表不会像在Chrome中一样导出。通过Android上安装的应用程序，图表可以正常运行。当我尝试在Android上导出图表时，没有任何反应。在Chrome for Android中使用远程调试并单击导出按钮会显示以下错误：

[干预]忽略尝试取消具有cancelable = false的touchstart事件，例如因为滚动正在进行且无法中断。

我怎么解决这个问题？

已经在Android Highcharts库上测试过，它也没有用。我制作了导出设置，如下视频所示：https://www.youtube.com/watch?v=feoZdOYBiF0

我使用Ionic 3和Angular 5，这是我的代码：

App.module.ts

import { ChartModule, HIGHCHARTS_MODULES} from 'angular-highcharts';
import exporting from 'highcharts/modules/exporting.src.js';
import * as Highcharts from 'highcharts';
import highcharts from 'angular-highcharts/highcharts';
import stock from 'highcharts/modules/stock.src';
import more from 'highcharts/highcharts-more.src';

export function highchartsModules(){
  return [exporting, stock, more ];

}

Highcharts.setOptions({
        global: {
                useUTC: false               
        },
        lang: { 
            months: [
                'Janeiro', 'Fevereiro', 'Março', 'Abril',
                'Maio', 'Junho', 'Julho', 'Agosto',
                'Setembro', 'Outubro', 'Novembro', 'Dezembro'
            ],
            weekdays: [
                'Domingo', 'Segunda-Feira', 'Terça-Feira', 'Quarta-Feira',
                'Quinta-Feira', 'Sexta-Feira', 'Sábado'
            ],
            shortMonths: [ "Jan" , "Fev" , "Mar" , "Abr" , 
        "Mai" , "Jun" , "Jul" , "Aug" , "Set" , "Out" , 
        "Nov" , "Dez"]
    }

});

@NgModule({
    declarations: [ ... ],
    imports: [ ChartModule ],
    bootstrap: [IonicApp],
    entryComponents: [...],
    providers: [
    {provide: HIGHCHARTS_MODULES, useFactory: highchartsModules},
    ]
})
export class AppModule { }

page.html中

<ion-content>
    <div [chart]="stock" style="height: 510px; min-width: 310px"></div>
<ion-content>

Page.ts

import { Chart } from 'angular-highcharts';
import * as Highcharts from "highcharts/highstock";
import { StockChart } from 'angular-highcharts';

@IonicPage()
@Component({
    selector: 'page-about',
    templateUrl: 'about.html'
})
export class AboutPage {


 stock: StockChart;


@ViewChild('content') content: ElementRef;


 constructor(...) {

    ...

        this.humorList$.subscribe(items => {
            this.stock = new StockChart({
                rangeSelector: {
                    selected : 1,
                    enabled:true                    
                },

                chart: {
                    type: 'spline',
                },
                exporting: {
                    dateFormat:"%d-%m-%Y",
                    chartOptions: {
                        plotOptions: {
                            series: {
                                dataLabels: {
                                    enabled: true
                                }
                            }
                        }
                    },
                    fallbackToExportServer: false
                },
                credits: {
                    enabled: false
                },
                title: {
                    text: undefined
                },
                plotOptions: {
                    series: {
                        color: '#009c58',                   
                    },
                    spline: {
                        marker: {
                            enabled: true,
                            fillColor: '#FFFFFF',
                            lineWidth: 2,
                            lineColor: null 
                        }
                    }
                },
                xAxis: {
                    type: 'datetime',
                    labels: { 
                        overflow: 'justify'
                    },
                    scrollbar: {
                        enabled: false
                    }
                },
                yAxis: {
                    opposite: true,
                    min: 0,
                    max: 9,
                    type: "category",
                    categories: [...],
                    labels: {
                        reserveSpace: false, 
                        style: {
                            fontSize: '10px',
                            opacity: 0.55
                        }
                    },
                    title: {
                        text: undefined
                    },
                    minorGridLineWidth: null,
                    alternateGridColor: '#dff9ce',
                    gridLineColor: '#a0d87c',
                    gridLineWidth: 0.5
                },
                series: [{
                    name: 'Humor',
                    data: [...]
                }],

            });
        });           

    }

有人可以帮帮我吗？如果可能的话，我想看一个代码示例。

答案

据我所知，图表不会在角度嵌入渲染引擎中渲染。我建议使用adb来远程调试你的应用程序。记录消息可能正在呈现给控制台。