Question

我正在尝试使用jquery mobile和graphael绘制一个饼图并且没有运气。不确定我做错了什么。任何人有任何指针？这是我在http://www.artetics.com/Articles/using-various-javascript-libraries-to-create-pie-chart

中使用的javascript

     //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>

Answer 1

http://jsfiddle.net/Gkhae/

上述工作，我认为javascript片段是错误的。从g.raphael示例中复制了一个，它似乎正在起作用。

Jquery Mobile和Graphael没有合作

1 个答案: