Jquery Mobile和Graphael不在一起工作

我想繪製一個使用jquery mobile和graphael的餅圖，但沒有運氣。不知道我做錯了什麼。任何人有任何指針？這裏是我使用的JavaScript從http://www.artetics.com/Articles/using-various-javascript-libraries-to-create-pie-chart Jquery Mobile和Graphael不在一起工作

 //Push our data into two separate arrays 
    var labels = []; 
    var values = []; 
     for (i in data.items) { 
     var item = data.items[i]; 
     labels.push(item.label); 
     values.push(item.data); 
     } 
    //Lines below will draw the chart 
    window.onload = function() {  //We will draw in our div 
    var r = Raphael("graphaelExample"); 
    //Text settings 
    r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-serif"; 
    r.g.text(320, 100, "Number of posts").attr({"font-size": 20}); 

    //Create pie 
    var pie = r.g.piechart(320, 240, 100, values, {legend: labels, legendpos: "west"}); 
     //We will adjust UI when mouse over the chart sector 
    pie.hover(function() { 
     this.sector.stop(); 
     this.sector.scale(1.1, 1.1, this.cx, this.cy); 
     if (this.label) { 
     this.label[0].stop(); 
     this.label[0].scale(1.5); 
     this.label[1].attr({"font-weight": 800}); 
     } 
    }, function() { 
     this.sector.animate({scale: [1, 1, this.cx, this.cy]}, 500, "bounce"); 
     if (this.label) { 
     this.label[0].animate({scale: 1}, 500, "bounce"); 
     this.label[1].attr({"font-weight": 400}); 
     } 
    }); 
    };

這裏是html。我確實將raphael libs作爲jsfiddle的資源。

 <!DOCTYPE html> 
    <html> 
     <head> 
     <title>Page Title</title> 

     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script> 
    </head> 
    <body> 

    <div data-role="page"> 

     <div data-role="header"> 
      <h1>Page Title</h1> 
     </div><!-- /header --> 

     <div data-role="content">  
      <div id="graphaelExample"></div>   
     </div><!-- /content --> 

     <div data-role="footer"> 
      <h4>Page Footer</h4> 
     </div><!-- /footer --> 
    </div><!-- /page --> 

    </body> 
    </html>

來源

2012-03-13 retrobrain

我在任何地方都看不到JSFiddle的鏈接。你是否有一個？ – Jasper 2012-03-13 20:14:34

http://jsfiddle.net/Gkhae/

以上的作品，我認爲JavaScript片段是錯誤的。複製了g.raphael例子中的一個，它似乎正在工作。

來源

2012-03-13 22:08:48 retrobrain

難道是window.onload函數？ – 2013-04-24 11:27:59

Jquery Mobile和Graphael不在一起工作

回答

相關問題