Output (barre di colonne) da Chart.js sfocato nel browser Opera?

Question

Versione Opera: 32.0.1948.69 (l'output funziona bene su altri principali browser).

Qualcuno sa come è possibile correggere la sfocatura da Chart.js?

La larghezza del grafico non è pertinente qui, indipendentemente dalle dimensioni che assumo, esso ha sempre un livello di sfocatura (soprattutto quando si passa sopra la colonna) che vorrei eliminare.

Immagine:

esempio Fiddle: https://jsfiddle.net/eugensunic/1sg79n7x/1/

codice Fiddle:

var array= [100, 59, 80, 333, 56, 55, 40] 
var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      fillColor: "rgba(220,220,220,0.5)", 
      strokeColor: "rgba(220,220,220,0.8)", 
      highlightFill: "rgba(220,220,220,0.75)", 
      highlightStroke: "rgba(220,220,220,1)", 
      data: array 
     } 
    ] 
}; 
var options = { 
     animation: true 
    }; 
    var ctx = document.getElementById("myChart").getContext("2d"); 
    myNewChart = new Chart(ctx).Bar(data, options); 

MODIFICA: Confronto immagini tra Chrome e Opera.

Answer 1

Si potrebbe provare a renderlo come un png in questo modo:

myLineChart.toBase64Image(); 

Di grossolana In questo modo sarebbe statico quindi potrebbe non essere la migliore risposta.

Answer 2

È necessario aggiungere alcune righe di proprietà CSS per ottimizzare il rendering delle immagini per Opera come spiegato qui: https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering e visualizzato di seguito.

canvas#myChart { 
    image-rendering: optimizeSpeed;    /* Older versions of FF */ 
    image-rendering: -moz-crisp-edges;   /* FF 6.0+ */ 
    image-rendering: -webkit-optimize-contrast; /* Webkit (non standard naming) */ 
    image-rendering: -o-crisp-edges;   /* OS X & Windows Opera (12.02+) */ 
    image-rendering: crisp-edges;    /* Possible future browsers. */ 
    -ms-interpolation-mode: nearest-neighbor; /* IE (non standard naming) */ 
}