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

s8vozzvw 于 2023-04-04 发布在 PHP

关注(0)|答案(7)|浏览(91)

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

php

来源：https://stackoverflow.com/questions/33385398/how-to-fix-blurry-chart-issue-in-chart-js

7条答案

按热度按时间

bqucvtff1#

请确保您没有向canvas元素添加一些CSS。在我的例子中，我发现我向canvas元素添加了border属性，这导致了文本和条形图模糊的问题。
别用这样的词：

canvas { border: 1px solid #000 }

或者像你的例子中的id：

#myChart { border: 1px solid #000 }

赞(0）回复(0）举报 2023-04-04

ygya80vv2#

2022年解决方案：

在chartjs选项中添加这个，它就像魔术一样工作。

devicePixelRatio: 4

赞(0）回复(0）举报 2023-04-04

km0tfn4u3#

我今天在Chrome最新版本上遇到了这个问题，实际上浪费了3个小时来追踪它。最后发现只有当浏览器URL是带有某些端口的localhost时才会发生这个问题。例如http://localhost:1700/
我在虚拟主机上浏览了我的应用程序，作为[http://www.localdomain.com/(by](http://www.localdomain.com/(by)修改主机文件），问题消失了。：-）
希望这些信息可以帮助开发人员重现和修复错误！！！

赞(0）回复(0）举报 2023-04-04

g6baxovj4#

尝试在x坐标值上增加0.5。请参阅此处的说明

赞(0）回复(0）举报 2023-04-04

vmdwslir5#

可能是笔划宽度。
请检查您推送的数据集。

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

赞(0）回复(0）举报 2023-04-04

tpxzln5u6#

我在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示例。

赞(0）回复(0）举报 2023-04-04

eqzww0vc7#

我的情况也很相似。条形图很模糊，标签看起来很糟糕。所以我在选项中添加了下面的代码。它工作起来很有魅力！

options: {
    responsive: true,
    maintainAspectRatio: false,
  }

赞(0）回复(0）举报 2023-04-04

我来回答

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

7条答案

相关问题

热门标签

最新问答