Chart.js 的输出（柱状图）在 Opera 浏览器中模糊？

Question

Opera 版本：32.0.1948.69（输出在其他主要浏览器上工作正常）。

有谁知道我怎样才能解决 Chart.js 的模糊问题？

图表的宽度在这里无关紧要，无论我采用哪个尺寸，它总是有一定程度的模糊（尤其是当鼠标悬停在列上时），我想消除这种模糊。

图片:

Fiddle 示例：https://jsfiddle.net/eugensunic/1sg79n7x/1/

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

编辑： Chrome和Opera的图片对比。

Answer 1

您可以尝试将其渲染为 png，如下所示：

myLineChart.toBase64Image();

当然，这会使它成为静态的，所以它可能不是最好的答案。

Answer 2

您需要添加几行 CSS 属性来优化 Opera 的图像渲染，如下所述：https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering 和如下所示。

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

Chart.js 的输出（柱状图）在 Opera 浏览器中模糊？

Output (column bars) from Chart.js blurry in Opera browser?

html

javascript

css

opera

chart.js