Çıkış (sütun çubukları) Opera tarayıcıda Chart.js bulanık?

Question

Opera Versiyon: 32.0.1948.69 (çıkış diğer büyük tarayıcılarda çalışıyor).

kimse muhtemelen Chart.js gelen bulanıklık düzeltmek nasıl biliyor mu?

Çizelgenin genişliği burada önemli değil, aldığım hangi boyutta olursa olsun, her zaman ortadan kaldırmak istediğim bir bulanıklık seviyesi (özellikle sütun üzerinde gezinirken).

Görüntü:

Fiddle örnek: https://jsfiddle.net/eugensunic/1sg79n7x/1/

Fiddle kodu:

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); 

EDIT: Chrome ile Opera arasında resim karşılaştırması.

Answer 1

Öyle böyle bir png olarak render deneyebilirsiniz: kaba Of

myLineChart.toBase64Image(); 

bu statik En iyi cevap olmayabilir bu yüzden hale getirecektir. https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering ve aşağıda görüldüğü:

Answer 2

Burada açıklandığı gibi Opera için render görüntüsünü optimize etmek CSS özellikleri bir kaç satır eklemek gerekir.

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) */ 
}