画布不工作在jQuery Mobile

-1

我在一个应用程序中一起使用jQuery mobile和Chart.js。以下是示例应用代码画布不工作在jQuery Mobile

<!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文件时，它可以工作，即画布显示图表。

任何人都知道该文件导致画布的麻烦是什么？

来源

2015-06-20 Narayan Prusty

尝试把你的CSS的chart.js之...不知道.....它正常工作中的jsfiddle后，可以实时移动，可能会给一些麻烦。 .....尝试使用“reset.css” –

@ZigmaEmpire现在仍在工作。你可以分享jsfiddle吗？ –

这里是jsfiddle网址https://jsfiddle.net/ZigmaEmpire/a4hnwnhd/ –

总结你的脚本块在$(document).ready(function() { ... })

来源

2015-06-21 02:10:08 potatopeelings

画布不工作在jQuery Mobile

回答

相关问题