如何解决图表js中的模糊图表问题?

I am creating a bar chart using chart.js. but this chart look blurry in my screen. Below is my html and js code:

我正在使用chart.js创建一个条形图。但是这个图表在我的屏幕上看起来很模糊。下面是我的html和js代码:

<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 for create chart bar:

创建图表栏的Js代码:

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>

2 个解决方案

#1

I faced this today on Chrome latest version, literally wasted 3 hours to chase it. Finally it turned out that issue only occurs only when the browser URL is localhost with some port. e.g. http://localhost:1700/

我今天在Chrome的最新版本上，花了3个小时去追它。最后，只有当浏览器URL是具有某些端口的localhost时，才会出现问题。例如,http://localhost:1700 /

I browsed my app on a dummy host as http://www.localdomain.com/(by modifying hosts file) and issue is gone. :-)

我在一个虚拟主机上浏览了我的应用程序，http://www.localdomain.com/(通过修改主机文件)，问题就消失了。:-)

Hope this info helps the developers to reproduce and fix the bug!!!

希望这个信息能帮助开发者重现并修复这个错误!!

#2

Try adding 0.5 to your x coordinate values. See explanation to this here

试着在x坐标上加上0。5。请看这里的解释

#1