画布在 jQuery Mobile 中不起作用答案

【问题标题】：Canvas not working in jQuery Mobile画布在 jQuery Mobile 中不起作用
【发布时间】：2015-09-06 13:08:44
【问题描述】：

我在一个应用程序中同时使用 jQuery mobile 和 Chart.js。这是示例应用程序代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="https://cdn.rawgit.com/nnnick/Chart.js/master/Chart.js"></script>
</head>
<body>


    <div data-role="page" id="chart">
      <div data-role="header">
        <a target="_blank" href="#home" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
        <h1>Chart</h1>
      </div>

      <div data-role="main" class="ui-content">
          <canvas id="canvas" height="450" width="600"></canvas>
      </div>
    </div>


    <script>

            var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
            var lineChartData = {
                labels : ["January","February","March","April","May","June","July"],
                datasets : [
                    {
                        label: "My First dataset",
                        fillColor : "rgba(220,220,220,0.2)",
                        strokeColor : "rgba(220,220,220,1)",
                        pointColor : "rgba(220,220,220,1)",
                        pointStrokeColor : "#fff",
                        pointHighlightFill : "#fff",
                        pointHighlightStroke : "rgba(220,220,220,1)",
                        data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                    },
                    {
                        label: "My Second dataset",
                        fillColor : "rgba(151,187,205,0.2)",
                        strokeColor : "rgba(151,187,205,1)",
                        pointColor : "rgba(151,187,205,1)",
                        pointStrokeColor : "#fff",
                        pointHighlightFill : "#fff",
                        pointHighlightStroke : "rgba(151,187,205,1)",
                        data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                    }
                ]

            }

           var ctx = document.getElementById("canvas").getContext("2d");
            window.myLine = new Chart(ctx).Line(lineChartData, {
                responsive: true
            });
    </script>
</body> 
</html>

画布根本不显示图表。但是当我删除 jquery.mobile-1.4.5.min.css 文件时，它可以工作，即画布显示图表。

谁知道那个文件给画布带来了什么麻烦？

【问题讨论】：

试着把你的css放在Chart.js之后......不确定......它在jsfiddle中正常工作，可能在真正的移动设备中它可能会带来一些麻烦......试试使用“reset.css”
@ZigmaEmpire 现在还在工作。你能分享一下jsfiddle吗？
这里是 jsfiddle 网址jsfiddle.net/ZigmaEmpire/a4hnwnhd

标签： jquery jquery-mobile canvas html5-canvas chart.js

【解决方案1】：

将您的脚本块包装在$(document).ready(function () { ... } )

【讨论】：