0
私はjquery mobileとgraphaelを使って円グラフを描画しようとしています。私が間違っていることを確認していない。誰もが何か指針を持っていますか？ここで私はhttp://www.artetics.com/Articles/using-various-javascript-libraries-to-create-pie-chartJquery 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});
}
});
};
から使用されるJavaScriptであり、ここではhtmlです。私は、jsfiddle上のリソースとして、グラフィカルなlibsを含めました。
<!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>
JSFiddleへのリンクはどこにも表示されません。あなたは1つ持っていますか？ – Jasper