Chart.js无法在桌面上的移动设备(Safari/Chrome)上绘制

本文介绍了Chart.js无法在桌面上的移动设备(Safari/Chrome)上绘制的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个饼状图，可以很好地在桌面上运行.它从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

欢迎任何建议

js无法在桌面上的移动设备

Chart.js无法在桌面上的移动设备(Safari/Chrome)上绘制

问题描述

推荐答案