Chart.js无法在桌面上的移动设备(Safari/Chrome)上绘制 [英] Chart.js not drawing on mobile (safari/chrome) fine on desktop
问题描述
我有一个饼状图，可以很好地在桌面上运行.它从AJAX请求中检索数据并存储其获取的data/json.然后将选定的数据推入图表.我正在使用Thymeleaf&春天来了，但是那与我无关.
I've got a piechart that works perfectly fine on desktop. It retrieves data from an AJAX request and stores the data/json it gets. Selected data is then pushed into the chart. I am using Thymeleaf & Spring in but thats not relevant here I believe.
当我通过Safari或chrome在移动设备上访问时，页面上的所有内容均显示正常，但是该图不存在.
Everything is rendered fine on my page when I access it through Safari or chrome on mobile, however the graph is not present.
我尝试使用chart.js文档中提供的其他选项来更改响应式true/false，maintaingAspectRatio false/true.更改了视口，在画布的容器上设置了我的宽度，而不是画布本身和一堆其他东西的宽度.
I've tried changing responsive true/false, maintaingAspectRatio false/true, playing with other options provided in the chart.js documentation. Changed the viewport, set my width on the container of the canvas rather than the canvas it self and a whole bunch of other stuff.
可能是由于装载顺序造成的吗?即页面已加载，然后才能实际从请求中获取信息?但是，这意味着它也不应该在台式机上运行.
Could it be due to the load order? i.e the page is loaded before it can actually get the information from the request? However, that would mean that it shouldn't be working on desktop either.
这是一些代码
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.html (most of the other html is cut out out, but this on its own doesn't work)
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-
scale=1,maximum-scale=7"/>
<title>Hmm</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="../../javascript/Chart.min.js" th:href="@{/Chart.min.js}"/>
<script src="../../javascript/js-url-2.5.0/url.js" th:href="@{/url.js}" ></script >
<link rel="stylesheet" href="../static/css/graph.css" th:href="@{/css/graph.css}"/>
<script src="../../javascript/myGraph.js" th:href="@{/myGraph.js}" />
</head>
<body>
<div class="chart-container">
<canvas id="daysGraph" ></canvas>
</div>
</body>
</html>
graph.css
.chart-container {
position: relative;
margin: auto;
height: 80vh;
width: 80vw;
}
在实时服务器上，它看起来像此
On the live server it looks like this
欢迎任何建议
推荐答案
事实证明，与本地主机相关的移动设备与dektop上的api路由存在问题.因此，不会从api提取我的数据，因此不会填充图表，这就是为什么它不显示在移动设备上的原因.换句话说，我在错误的地方寻找答案.
Turned out there was something wrong with the api-route on mobile vs dektop relating to localhost. Therefore my data wasn't being fetched from the api and thus wouldn't populate the chart which is why it is not displaying on mobile. In other words, I was looking in the wrong places for an answer.
这篇关于Chart.js无法在桌面上的移动设备(Safari/Chrome)上绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
