Wie zu beheben verschwommene Diagramm Problem in Diagramm js?

Question

Ich erstelle ein Balkendiagramm mit chart.js. aber dieses Diagramm sieht auf meinem Bildschirm verschwommen aus. Unten ist mein HTML und JS-Code:

<canvas id="myChart" style="padding-left: 0;padding-right: 0;margin-left: auto; margin-right: auto; display: block;width: 90%;height:350px;"></canvas> 

Js-Code für die Kartenleiste erstellen:

window.onload = function() {  
var data = { 
labels: [], 
datasets: [ 
    { 
     label: "My First dataset", 
     fillColor: "rgba(220,220,220,2)", 
     strokeColor: "rgba(220,220,220,2)", 
     pointColor: "rgba(220,220,220,2)", 
     pointStrokeColor: "#fff", 
     pointHighlightFill: "#fff", 
     pointHighlightStroke: "rgba(220,220,220,2)" 
    }, 
    { 
     label: "My Second dataset", 
     fillColor: "rgba(12, 18, 51, 1)", 
     strokeColor: "rgba(12, 18, 51, 1)", 
     pointColor: "rgba(12, 18, 51, 1)", 
     pointStrokeColor: "#fff", 
     pointHighlightFill: "#fff", 
     pointHighlightStroke: "rgba(12, 18, 51, 1)" 
    } 
] 
}; 

var ctx = jQuery("#myChart")[0].getContext('2d'); 
var options = { 
scaleBeginAtZero : true, 
scaleShowGridLines : true,  
scaleGridLineColor : "rgba(0,0,0,.05)", 
scaleGridLineWidth : 1,  
scaleShowHorizontalLines: true, 
scaleShowVerticalLines: false, 
barShowStroke : true, 
barStrokeWidth : 2, 
barValueSpacing : 10,  
barDatasetSpacing : 1, 

legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>" 

} 
var myLineChart = new Chart(ctx).Bar(data, options); 
<?php foreach($resultGraph as $share){?> 

myLineChart.addData([<?php echo $share->shCOunt;?>, <?php echo $share->tt;?>], "<?php echo $share->post_date1;?>"); 
<?php } ?> 

//myLineChart.addData([30, 50], "January"); 

} 

</script> 

Answer 1

Try 0,5 bis Ihre x Hinzufügen Koordinatenwerte. Siehe Erklärung zu diesem here

Answer 2

Ich konfrontiert dies heute auf Chrome neueste Version, buchstäblich verschwendet 3 Stunden zu jagen. Schließlich stellte sich heraus, dass dieses Problem nur auftritt, wenn die Browser-URL localhost mit einem Port ist. z.B. http://localhost:1700/

Ich durchsucht meine App auf einem Dummy-Host als http://www.localdomain.com/(by Host-Datei ändern) und Problem ist weg. :-)

Hoffe diese Info hilft den Entwicklern, den Fehler zu reproduzieren und zu beheben !!!