Drawing Slices 扇形 - caleb531/jcanvas-docs GitHub Wiki
Slices 扇形
A slice in jCanvas is, essentially, a slice of a circle (similar to a pizza slice).
jCanvas中的扇形实质上是一个圆的一片(就像一片比萨一样)。
Basic Usage 基本用法
You can draw a slice using the drawSlice()
method. The size of a slice is determined by its start
, end
, and radius
properties.
你可以使用drawSlice()
方法来画一个扇形。扇形的面积取决于它的start
,end
和radius
属性。
The position of a slice is determined by its x
and y
properties. These coordinates lie at the tip of the slice.
扇形的位置取决于它的x``y
属性,这个坐标位于扇形的尖上。
// Draw a 60° slice 画一个60度的扇形
$('canvas').drawSlice({
fillStyle: '#f63',
x: 100, y: 100,
radius: 150,
// start and end angles in degrees 角度值的起始角和终止角
start: 60, end: 120
});
Creating a pie chart 创建一个饼形图
You can create a simple pie chart in jCanvas using the drawSlice()
method.
在jCanvas中,你可以使用drawSlice()
方法创建一个简单的饼型图。
In the example below, the spread
property determines the spacing between slices. The property's value is a multiple of the slice's radius (from 0 to 1).
在下边的例子中,spread
属性决定了扇形之间的空白。这个属性的值是扇形半径的倍数(从0到1)。
$('canvas')
.drawSlice({
layer: true,
name: 'red-slice',
groups: ['chart', 'slices'],
fillStyle: '#c33',
x: 180, y: 110,
start: -45, end: 15,
radius: 100,
spread: 1 / 40
})
.drawSlice({
layer: true,
name: 'green-slice',
groups: ['chart', 'slices'],
fillStyle: '#6c0',
x: 180, y: 110,
start: -135, end: -45,
radius: 100,
spread: 1 / 40
})
.drawSlice({
layer: true,
name: 'blue-slice',
groups: ['chart', 'slices'],
fillStyle: '#36c',
x: 180, y: 110,
start: 15, end: -135,
radius: 100,
spread: 1 / 40
});
To add a text label to your pie chart, create a text layer using the drawText()
method.
想要给饼形图加文本标签的话,要使用drawText()
方法创建一个文本层。
$('canvas')
.drawSlice({
layer: true,
name: 'red-slice',
groups: ['chart', 'slices'],
fillStyle: '#c33',
x: 180, y: 110,
start: -45, end: 15,
radius: 100,
spread: 1 / 40
})
.drawSlice({
layer: true,
name: 'green-slice',
groups: ['chart', 'slices'],
fillStyle: '#6c0',
x: 180, y: 110,
start: -135, end: -45,
radius: 100,
spread: 1 / 40
})
.drawSlice({
layer: true,
name: 'blue-slice',
groups: ['chart', 'slices'],
fillStyle: '#36c',
x: 180, y: 110,
start: 15, end: -135,
radius: 100,
spread: 1 / 40
})
.drawText({
layer: true,
name: 'red-label',
groups: ['chart', 'labels'],
fillStyle: '#fff',
x: 160, y: 50,
fontFamily: 'sans-serif',
fontSize: 20,
text: '17%'
})
.drawText({
layer: true,
name: 'green-label',
groups: ['chart', 'labels'],
fillStyle: '#fff',
x: 120, y: 115,
fontFamily: 'sans-serif',
fontSize: 20,
text: '25%'
})
.drawText({
layer: true,
name: 'blue-label',
groups: ['chart', 'labels'],
fillStyle: '#fff',
x: 220, y: 150,
fontFamily: 'sans-serif',
fontSize: 20,
text: '58%'
})