Jquery Mobile и Graphael не работают вместе - PullRequest
Новая
       36

Jquery Mobile и Graphael не работают вместе

0 голосов
/ 14 марта 2012

Я пытаюсь нарисовать круговую диаграмму, используя jquery mobile и graphael, но безуспешно.Не уверен, что я делаю не так.У кого-нибудь есть указатели?Вот javascript, который я использовал от http://www.artetics.com/Articles/using-various-javascript-libraries-to-create-pie-chart

     //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.Я включил rafalibs в качестве ресурсов в 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>

1 Ответ

1 голос
/ 14 марта 2012

http://jsfiddle.net/Gkhae/

Вышеописанное работает, я думаю, что фрагмент JavaScript был неверным. Скопировал один из примеров g.raphael и, похоже, работает.

...