Chart.js does not appear on Android

Navigation
0

App developed in Ionic. 

cli packages: (/usr/lib/node_modules)

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.4
    Cordova Platforms  : android 6.3.0 browser 5.0.1 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.9.3
    npm  : 5.6.0
    OS   : Linux 4.10

Chart.js is not displayed in the android emulator. ionic cordova run android --emulator .

  

Note:Android6(api23)works,Android7(api25)and8(api26)no  itworks.

Butinwebview(ioniccordovarunbrowser)andiPhone(IonicViewApp)itisdisplayedperfectly.

html template

<canvas #elChart></canvas>

scss 

canvas {
    width: 100% !important;
}

component.ts (I tried to set responsive and maintainAspectRatio to true or false) 

ngOnInit() {
    this.chart = new Chart(this.elChart.nativeElement, {
      type: this.typeChart,
      data: {
        datasets: [{
          data: this.dataChart,
          backgroundColor: this.colorsChart,
          borderWidth: 0
        }],
        labels: this.labelsChart
      },
      options: {
        responsive: false,
        maintainAspectRatio: false,
        legend: {
          display: false,
        },
      }

    });
  }
    
asked by anonymous 24.01.2018 / 18:25

1 answer

1

I resolved temporarily with the issue # 4570 Chart.js but I hope you will help me solve problem completely, making Chart.js work normally.

Workaround - Displays the graph, but the actions will be lost (mouse click, mouse over etc.):

Wrap your canvas inside a div (add styles you might need to div) 

<div><canvas height="400" id="myChart" width="400"></canvas></div>

2 - Remove any "animation" (although you can change the code of item 3 / to use the endAnimation event to track when performing temporal correction) - Add these options: 

options: { animation:{duration:0}, ..... }

3- Add the following code (simple but can be improved to the end of animation if necessary):

(jQuery) 

$('#myChart').parent().html('<img style="max-height:100%;height:auto;width:100%;max-width:100%;margin:auto;display:inline;" src="' + chart.toBase64Image() + '" />');

(javascript) 

document.getElementById('myChart').parentElement.innerHTML = '<img style="max-height:100%;height:auto;width:100%;max-width:100%;margin:auto;display:inline;" src="' + chart.toBase64Image() + '" />';

Follow the issue # 5184 Chart.js on Github

    
25.01.2018 / 14:14
How to store a SELECT value in a variable in MYSQL? What view was used in this layout