Как экспортировать графики Highstock / Highcharts на Android?

bcosta спросил: 03 февраля 2018 в 10:58 в: javascript

Я построил диаграмму с использованием Highstock, она работает нормально в Chrome. Я могу экспортировать диаграмму, обычно создаваемую в Chrome. Но когда я тестирую Android, "экспорт диаграмм" не работает. Диаграмма не экспортируется, как в Chrome. С помощью приложения, установленного на Android, диаграмма работает нормально. Когда я пытаюсь экспортировать диаграмму на Android, ничего не происходит. Использование удаленной отладки в Chrome для Android и нажатие кнопки экспорта отображает следующую ошибку:

[Intervention] Игнорируется попытка отменить событие touchstart с помощью cancelable = false, например, потому что выполняется прокрутка и не работает прерваться.

Как я могу решить эту проблему?

Уже тестировался в Android Highcharts library, он также не работал. Я сделал настройки экспорта, как показано на этом видео: https://www.youtube.com/watch?v=feoZdOYBiF0

I использую 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: [...]
                }],            });
        });               }

Может ли кто-нибудь помочь мне? Если возможно, я бы хотел увидеть пример кода.


0 ответов