Chart.js 不能在桌面上很好地在移动设备（safari/chrome）上绘图答案

【问题标题】：Chart.js not drawing on mobile (safari/chrome) fine on desktopChart.js 不能在桌面上很好地在移动设备（safari/chrome）上绘图
【发布时间】：2018-05-23 19:11:43
【问题描述】：

我有一个饼图，可以在桌面上完美运行。它从 AJAX 请求中检索数据并存储它获取的数据/json。然后将选定的数据推送到图表中。我正在使用 Thymeleaf 和 Spring，但我相信这与这里无关。

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

我尝试更改响应式 true/false、maintaingAspectRatio false/true、使用 chart.js 文档中提供的其他选项。更改了视口，将我的宽度设置在画布的容器上，而不是画布本身和一大堆其他东西。

可能是因为加载顺序？即页面在它实际上可以从请求中获取信息之前被加载？但是，这意味着它也不应该在桌面上运行。

这是一些代码

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;

}

在实时服务器上看起来像this

欢迎任何建议

【问题讨论】：

标签： javascript jquery html chart.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

我自己也遇到过类似的问题，我通过使用borderWidth 解决了我的问题，以使其在所有设备上都能正常工作。尝试多次更改，看看是否有任何影响。

【讨论】：

我希望这很容易。我已经尝试过你的建议。然而没有成功。