如何修复图表 js 中的图表模糊问题？答案

【问题标题】：How to fix blurry chart issue in chart js?如何修复图表 js 中的图表模糊问题？
【发布时间】：2016-01-27 21:25:38
【问题描述】：

我正在使用 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代码：

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>

【问题讨论】：

你见过github.com/chartjs/Chart.js/issues/2814吗？

标签： javascript php jquery charts bar-chart

【解决方案1】：

尝试将 0.5 添加到您的 x 坐标值。看这个here的解释

【讨论】：

这会使图形更加模糊
你的值是浮点数吗？如果是这种情况，您应该先尝试四舍五入，然后添加 0.5。否则，它们总是会在边缘流血，因此看起来很模糊。
我不明白你在说什么。你能解释一下并告诉我我必须在我的代码中添加 0.5 的位置吗
当然，假设您的 x 坐标值来自 $share->shCOunt;，我建议您可以尝试以下方法：<?php echo (int)$share->shCOunt + 0.5; ?>。首先确保你的数据点是一个整数，然后加上 0.5。
@1cgonza 你能在这个现场测试用例中演示吗？ jsfiddle.net/askhflajsf/xzk6sh1q

【解决方案2】：

我今天在 Chrome 最新版本上遇到了这个问题，实际上浪费了 3 个小时来追逐它。最后事实证明，只有当浏览器 URL 是带有某个端口的 localhost 时，才会出现该问题。例如http://localhost:1700/

我在虚拟主机上以http://www.localdomain.com/(by 修改主机文件浏览了我的应用程序）并且问题消失了。 :-)

希望此信息能帮助开发人员重现和修复错误！！！

【讨论】：

我的作品也面临这个问题。
@ShrutikaPatil 你是怎么解决这个问题的？我们在一些子域的生产中遇到了同样的问题
@Mischa 我从画布标签中删除了 CSS 并将其添加到上层 div

【解决方案3】：

确保您没有向画布元素添加一些 CSS。就我而言，我发现我正在向画布元素添加边框属性，这是导致文本和条形模糊问题的原因。

不要使用类似的东西：

canvas { border: 1px solid #000 }

或在您的示例中使用 id ：

#myChart { border: 1px solid #000 }

【讨论】：

【解决方案4】：

可能是笔画宽度。

请检查您推送的数据集。

var arraytable = [
    [
        {label: "Sector", type: 'string'},
        {label: "Exposure", type: 'number'},
        {role: 'style', type: 'string'},
    ],
    ['Energy', 0.32, 'color: #005695; stroke-width: 0']
];
var datatable = google.visualization.arrayToDataTable(arraytable);

【讨论】：

【解决方案5】：

我在 3.2.1 版本上遇到了这个问题。

也许我有这个问题，因为我在模式窗口中显示图表。在我的例子中，我将 CSS 从 #myChart 移动到父元素，现在图表很清晰：

<style>
  .graph-wr {
    height: 600px;
    max-height: 600px;
    max-width: 100%;
    position: relative;
    width: 1650px;
  }
</style>

<div class="graph-wr">
  <canvas id="myChart"></canvas>
</div>

这解决了我的模糊问题。我仍然会更深入地研究它。我还会查看documentation about the responsiveness，因为我看到它有一些特定的选项。

Here 也是 Chart.js 中的 CodePen 示例。

【讨论】：