flotcharts 원형 그림 플러그인
13649 단어 js 플러그인
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.demo-placeholder{
width:500px;
height:500px;
magrin:auto;
}
style>
<title>Documenttitle>
head>
<body>
<div id="placeholder" class="demo-placeholder">div>
<script language="javascript" type="text/javascript" src="./jquery.js">script>
<script language="javascript" type="text/javascript" src="./jquery.flot.js">script>
<script language="javascript" type="text/javascript" src="./jquery.flot.pie.js">script>
<script type="text/javascript">
$(function(){
var data = [],
series = Math.floor(Math.random() * 6) + 3;
for (var i = 0; i < series; i++) {
data[i] = {
label: "Series" + (i + 1),
data: Math.floor(Math.random() * 100) + 1
}
}
var data = [
{ label: "Series1", data: 10},
{ label: "Series2", data: 30},
{ label: "Series3", data: 90},
{ label: "Series4", data: 70},
{ label: "Series5", data: 80},
{ label: "Series6", data: 20}
];
var data = [
{ label: " ", data: [[1,10]]},
{ label: " ", data: [[1,30]]},
{ label: " ", data: [[1,90]]},
{ label: " ", data: [[1,70]]},
{ label: " ", data: [[1,80]]},
{ label: " ", data: [[1,20]]}
];
$.plot($("#placeholder"), data, {
series: {
pie: {
show: true,
radius:0.8, // ，0-1 ，
innerRadius:0.2, //
startAngle:0, //
tilt:0.8, // ，
shadow:{ // ， tilt 1
top:-5,
left:-5,
alpha:0.2
},
offset:{ // ，
top:0,
left:0
},
stroke:{ //
color:"#00FF00",
width:5
},
label:{ //
show:true,
radius:0.8, //
threshold:0.01, // ，
formatter:function labelFormatter(label, series) { //
return "" + label + "
" + Math.round(series.percent) + "%";
},
background: { //
//color:"#aa0000",
opacity: 0.8 //
}
},
combine:{ // ，
color:"#999",
threshold:0.09,
label:" "
},
highlight:{
opacity:0.5
}
}
},
grid: { //
hoverable: true,
clickable: true
},
legend: {
show: false
}
});
//
$("#placeholder").bind("plothover", function(event, pos, obj) {
if (!obj) {return;}
var percent = parseFloat(obj.series.percent).toFixed(2);
console.log($("#hover"));
$("#hover").html("" + obj.series.label+" " + " (" + percent + "%)");
});
$("#placeholder").bind("plotclick", function(event, pos, obj) {
if (!obj) {
return;
}
percent = parseFloat(obj.series.percent).toFixed(2);
alert("" + obj.series.label + ": " + percent + "%");
});
})
script>
body>
html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
flotcharts 원형 그림 플러그인<html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
