javascript扇形,css画扇形
如何在 Canvas 中绘制扇形
canvas id="canvas" width="150" height="150"/canvas
10年积累的网站设计制作、成都做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站策划后付款的网站建设流程，更有石屏免费网站建设让你可以放心的选择与我们合作。
script type="text/javascript"
var canvas = document.getElementById("canvas");
function DrawSector(canvas_tag,start_angle,angle,radius,fill,anticlockwise){
var centerPoint = {x:75,y:75};
start_angle = start_angle || 0;
if (canvas_tag.getContext){
//开始绘制路径
ctx = canvas_tag.getContext("2d");
ctx.beginPath();
//画出弧线
ctx.arc(centerPoint.x,centerPoint.y,radius,start_angle,angle,anticlockwise);
//画出结束半径
ctx.lineTo(centerPoint.x,centerPoint.y);
//如果需要填充就填充，不需要就算了
if (fill) {
ctx.fill();
}else{
ctx.closePath();
ctx.stroke();
}
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
//画一个起始角度为45度，结束角度为90度，绘图方向顺时针的填充扇形
DrawSector(canvas,Math.PI/4,Math.PI/2,50,true,false);
//画一个起始角度为-90度，结束角度为-135度，绘图方向逆时针的未填充扇形
DrawSector(canvas,-Math.PI/2,-Math.PI*3/4,50,false,true);
/script
怎么用javascript做扇形统计图，求源码，万分感谢
script src=""/script
script src=""/script
div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"/div
script
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: b{point.percentage}%/b',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return 'b'+ this.point.name +'/b: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
});
/script
javascript怎样给饼图填色?
希望这个程序给你带来帮助：可以使用
HTML xmlns:v
HEADTITLE?/TITLE
META http-equiv=Content-Type content=text/html;charset=gb2312
STYLE
v\:* {
BEHAVIOR: url(#default#VML)
}
/STYLE
SCRIPT language=javascript
function init(){
var ssarr=new Array(200,100,200,80,100,50);
var cxx=200,cyy=150,rx=200,ry=150;
drawPie(cxx,cyy,rx,ry,ssarr);
}
function drawPie(cx,cy,rx,ry,sarr){
var total=0;
var colorsh=new Array('#ff0000','#0033FF','#aa4400','#33ffff','#FF00FF');
for(var i=0;isarr.length;i++){ total+=sarr[i]; }
for(var i=0;isarr.length;i++){ sarr[i]=sarr[i]/total; }
var startang=0;
for(var i=0;isarr.length;i++){
var endang=Math.round(23592960*sarr[i]);
var colorindex=i % colorsh.length;
if((colorindex==0) (i==(sarr.length-1))) colorindex++;
var thiscolor=colorsh[colorindex];
drawfan(cx,cy,rx,ry,startang,endang,thiscolor);
startang+=endang;
}
}
function drawfan(cx,cy,rx,ry,startang,endang,thiscolor){
/* 画扇形
(cx,cy) 中心坐标
rx 一个半径 ry 另一个半径
startang,endang 起始角度和结束角度
thiscolor 填充颜色
*/
var mapone=document.createElement("v:shape path=\"m "+cx+" "+cy+" al "+cx+" "+cy+" "+rx+" "+ry+" "+startang+" "+endang+" l "+cx+" "+cy+" e\" style=\"position:relative;rotation:0;WIDTH:400;HEIGHT:300;\" coordsize = \"400,300\" fillcolor=\""+thiscolor+"\" strokecolor=\""+thiscolor+"\" strokeweight=\"1pt\"/v:shape");
group1.appendChild(mapone);
}
/SCRIPT
/HEAD
BODY onload=init();
v:group
id=group1
style="left:0;top:0;WIDTH: 400px; POSITION: absolute; HEIGHT: 300px; rotation: 0" coordsize="400,300"
v:line from="0,0" to="400,0"/
v:line from="400,0" to="400,300"/
v:line from="400,300" to="0,300"/
v:line from="0,300" to="0,0"/
/v:group
/BODY
/HTML
本文题目：javascript扇形,css画扇形
标题来源：http://shouzuofang.com/article/dsspeho.html