<img src="http://files.jb51.net/file_images/article/201405/20140502140729.gif?20144214754" alt="jQuery のシンプルなチャート peity.js の使用例 example_jquery" ><br><div class="codetitle"> <span><a style="CURSOR: pointer" data="83774" class="copybut" id="copybut83774" onclick="doCopy('code83774')"><u>复制代</u></a></span> 代码如下:</div> <div class="codebody" id="code83774"> <br><html xmlns="http:/ /www.w3.org/1999/xhtml"> <BR><頭> <BR><title>無标题页</title> <br><script type="text/javascript" src="jQuery.js"></script> <br><script type="text/javascript" src="jquery.peity.js"></script> <br><script type="text/javascript"> <br>jQuery(function(){ <br>$(".bar-colours-1").peity("bar", { <br>色: ["赤", "緑", "青"], width: 100,height:100 <br>}) <br>$(".bar-colours-2").peity("bar", { <br>colours: function(value) { <br>戻り値 > ; 0 ? "緑" : "赤" <br>},幅: 100,高さ: 100 <br>}) <br>$(".bar-colours-3").peity("bar", { <br>colours: function(_, i, all) { <br>var g = parseInt((i / all.length) * 255) <br>return "rgb(255, " g ", 0)" <br> },width: 100,height:100 <br>}) <br>$(".pie-colours-1").peity("pie", { <br>色: ["シアン", "マゼンタ", "黄", "黒"],直径:100 <br>}) <br>$(".pie-colours-2").peity("パイ", { <br>色: function(_, i, all) { <br>var g = parseInt((i / all.length) * 255) <br>return "rgb(255, " g ", 0)" <br>},diameter:100 <br>}) <br><br><br>var updatedChart = $(".updating-chart").peity("line", { width: 150,height:50}) <br>setInterval(function() { <br> var ランダム = Math.round(Math.random() * 10) <br>var 値 = updatedChart.text().split(",") <br>values.shift() <br>values.push(random) <br>updatingChart <br>.text(values.join(",")) <br>.change() <br>}, 1000) <br>}) <br></script> <br></head> <br> <br><span class="bar-colours-1">5,3,9,6,5,9,7,3,5,2</span> <br><span class="bar-colours-2">5,3,2,-1,-3,-2,2,3,5,2</span> <br><span class="bar-colours-3">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span> <br><br> <br><span class="pie-colours-1">4,7,6,5</span> <br><span class="pie-colours-2">5,3,9,6,5</span> <br><br> <br><span class="updating-chart">5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3 、５、２＜／スパン＞ <br></body> <br></html> <br></span> </div>
