Chart.js没有在桌面上绘制移动（safari / chrome）

我有一个在桌面上完美运行的饼图。 它从AJAX请求中检索数据并存储它获得的数据/ json。 然后将所选数据推入图表。 我正在使用Thymeleaf＆Spring，但我认为这与此无关。

当我通过Safari或Chrome在移动设备上访问它时，我的页面上的所有内容都会正常呈现，但图表不存在。

我已尝试更改响应式true / false，维护AspectRatio false / true，使用chart.js文档中提供的其他选项。 更改了视口，在canvas的容器上设置我的宽度，而不是自己的canvas和一大堆其他东西。

可能是由于加载顺序？ 即页面是否可以实际从请求中获取信息之前加载？ 但是，这意味着它也不应该在桌面上工作。

这是一些代码

myGraph.js

$(document).ready(function () { var id = $.url(2); $.ajax({ url: "hosturl/a/b/" + id + "/c/d", type: "GET", dataType: "json", success: function (data) { console.log(data); var count = []; var days = []; for (var i in data) { days.push(data[i][1]); count.push(data[i][0]); } var chartdata = { labels: days, datasets: [ { label: "By day", backgroundColor: "#4dc3ff", borderWidth: 2, hoverBackgroundColor: "#009", hoverBorderColor: "#099", hoverBorderWidth: 5, data: count } ] }; var ctx = $("#daysGraph"); var pieChart = new Chart(ctx, { type: 'pie', data: chartdata, options: { responsive: true, legend: { display: true, position: 'right', labels: { fontColor: "#000" } } } }); }, error: function (data) { } }); 

graph.html （大多数其他html被删除了，但这本身不起作用）

graph.css

 .chart-container { position: relative; margin: auto; height: 80vh; width: 80vw; 

}

在实时服务器上它看起来像这样

欢迎任何建议

Answer 1

我自己也遇到过类似的问题，我通过使用borderWidth来解决我的问题，以便让它在所有设备上运行。 尝试多次更改它，看它是否有任何影响。

Answer 2

原来，与localhost相关的移动与dektop上的api-route有问题。 因此我的数据没有从api中获取，因此不会填充图表，这就是它不在移动设备上显示的原因。 换句话说，我在错误的地方寻找答案。