Диаграмма не отображается должным образом на мобильном - PullRequest
Новая
       28

Диаграмма не отображается должным образом на мобильном

0 голосов
/ 11 июля 2019

Я использую ionic 4 и chart.js для графика Линейный график работает нормально в браузере, но когда я создал apk и установил его на мобильном телефоне (Android 8), график не отображается должным образом. 

import { Chart } from 'chart.js';
import * as moment from 'moment';

@Component({
 selector: 'app-home',
 templateUrl: 'home.page.html',
 styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
 samples = 10;
 speed = 250;
 timeout = this.samples * this.speed;
 values: any = [];
 labels: any = [];
 charts: any = [];
 value = 0;
 scale = 1;
  display: any;
 originalCalculateXLabelRotation = 
  Chart.Scale.prototype.calculateXLabelRotation;
  constructor() {
  }
   ngOnInit() {
   this.initialize();
   addEmptyValues(this.values, this.samples, this.speed);
   advance(this.values, this.scale, this.charts, this.value, this.speed, 
this.display);
 }

 initialize() {
  this.charts.push(new Chart(document.getElementById('chart0'), {
  type: 'line',
  data: {
    datasets: [{
      data: this.values,
      backgroundColor: 'rgba(233, 176, 23, 0.1)',
      borderColor: '#e9b017',
      borderWidth: 2,
      lineTension: 0.25,
      pointBorderColor: 'rgba(233, 176, 23, 1)',
      pointBackgroundColor: '#fff',
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: 'rgba(233, 176, 23, 1)',
      pointHoverBorderColor: 'rgba(233, 176, 23, 1)',
      pointHoverBorderWidth: 2,
      pointRadius: 2,
      pointHitRadius: 10
    }]
  },
  options: {
    responsive: true,
    animation: {
      duration: this.speed * 1.5,
      easing: 'linear'
    },
    legend: false,
    scales: {
      xAxes: [{
        type: 'time',
        display: true
      }],
      yAxes: [{
        ticks: {
          max: 100,
          min: 0
        }
      }]
    }
  }
   })
   );
  }
  }

  function addEmptyValues(arr, n, vars) {
   for (let i = 0; i < n; i++) {
   arr.push({
     x: moment().subtract((n - i) * vars, 'milliseconds').toDate(),
     y: null
   });
  }
 }

   function rescale(scales) {
   const padding = [];
   this.addEmptyValues(padding, 10);
    this.values.splice.apply(this.values, padding);
    scales++;
    }

    function updateCharts(s) {

    s.forEach(function(chart) {
    chart.update();
   });
   }

    function progress(vard, vars, dis) {
   const randomint = Math.floor(Math.random() * 100); 
    vard = Math.min(Math.max(vard + (0.1 - Math.random() / 5), -1), 1) + 
   randomint;
   dis = vard;
   console.log(dis);
     vars.push({
       x: new Date(),
     y: vard
    });
   vars.shift();
    }


    function advance(vars, scales, chart , varsi, spee, dis) {
    if (vars[0] !== null && scales < 4) {
   updateCharts(chart);
   }
   progress(varsi, vars, dis);
   updateCharts(chart);
    setTimeout(function() {
   advance(vars, scales, chart, varsi, spee, dis);
   }, 3000);
   }

Значение графиков меняется каждые 3 секунды, в сети новые данные отправляются каждые 3 секунды, но в мобильных приложениях множественные значения передаются каждые 3 секунды.

...