Chart.js在台式机上不绘制移动设备(Safari/Chrome)的罚款

我有一个在台式机上非常好的piechart。它从AJAX请求中检索数据，并存储它获取的数据/JSON。然后将选定的数据推入图表。我正在使用胸腺＆amp;春天，但我相信这并不重要。

当我通过Mobile上的Safari或Chrome访问Chrome时，我的页面上的所有内容都很好，但是该图不存在。

我尝试更改响应式的true/fals，navenaingaspectratio false/true，播放图表文档中提供的其他选项。更改了视口，将我的宽度设置在画布的容器上，而不是帆布自我和一堆其他东西。

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

这是一些代码

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都被切出，但这本身不起作用）

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

}

在实时服务器上看起来像

欢迎任何建议

证明与Localhost有关的移动与DEKTOP上的API路由出了问题。因此，我的数据并没有从API中获取，因此不会填充图表，这就是为什么它不在移动设备上显示的原因。换句话说，我在错误的地方寻找答案。

我本人也遇到了类似的问题，我通过使用BorderWidth来解决我的问题，以使其在所有设备上工作。尝试几次更改它以查看它是否有任何影响。

相关内容

最新更新

热门标签：