Đầu ra (thanh cột) từ Chart.js bị mờ trong trình duyệt Opera?

Question

Phiên bản Opera: 32.0.1948.69 (đầu ra hoạt động tốt trên các trình duyệt chính khác).

Có ai biết làm thế nào tôi có thể khắc phục được sự mờ nhạt từ Chart.js không?

Chiều rộng của biểu đồ không có liên quan ở đây, bất kể tôi lấy nó ở đâu cũng có mức độ mờ (đặc biệt là khi di chuột qua cột) mà tôi muốn loại bỏ.

ảnh:

Fiddle dụ: https://jsfiddle.net/eugensunic/1sg79n7x/1/

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

EDIT: So sánh hình ảnh giữa Chrome và Opera.

Answer 1

Bạn có thể thử render nó như là một png như vậy:

myLineChart.toBase64Image(); 

Trong thô này sẽ làm cho nó tĩnh để Nó có thể không phải là câu trả lời tốt nhất.

Answer 2

Bạn cần thêm một vài dòng thuộc tính CSS để tối ưu hóa hiển thị hình ảnh cho Opera như được giải thích tại đây: https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering và xem bên dưới.

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