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()方法来画一个扇形。扇形的面积取决于它的startendradius属性。
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%'
})