如何修复图表JS中的模糊图表问题? [英] How to fix blurry chart issue in chart js?
本文介绍了如何修复图表JS中的模糊图表问题?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用chart.js创建条形图.但是此图表在我的屏幕上看起来很模糊.下面是我的html和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:
<canvas id="myChart" style="padding-left: 0;padding-right: 0;margin-left: auto; margin-right: auto; display: block;width: 90%;height:350px;"></canvas>
用于创建图表栏的Js代码:
Js Code for create chart bar:
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>
推荐答案
请确保您未在canvas元素中添加一些CSS.以我为例,我发现我在canvas元素上添加了border属性,这导致了文本和条形模糊的问题.
Make sure that you don't adding some css to the canvas element. In my case I found that I am adding border property to the canvas element what was causing the problem of blur on text and bars.
不要使用类似的东西:
canvas { border: 1px solid #000 }
或ID(例如您的示例):
or with id like in your example :
#myChart { border: 1px solid #000 }
这篇关于如何修复图表JS中的模糊图表问题?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文