我的书签
添加书签
移除书签Doughnut and Pie
They are excellent at showing the relational proportions between data.
Pie and doughnut charts are effectively the same class in Chart.js, but have one different default value - their . This equates what percentage of the inner should be cut out. This defaults to 0 for pie charts, and 50 for doughnuts.
The doughnut/pie chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a the dataset's arc are generally set this way.
These are the customisation options specific to Pie & Doughnut charts. These options are merged with the global chart configuration options, and form the options of the chart.
| Name | Type | Default | Description |
|---|---|---|---|
cutoutPercentage | Number | 50 - for doughnut, 0 - for pie | The percentage of the chart that is cut out of the middle. |
rotation | Number | Starting angle to draw arcs from. | |
circumference | Number | 2 Math.PI | Sweep to allow arcs to cover |
animation.animateRotate | Boolean | true | If true, the chart will animate in with a rotation animation. This property is in the options.animation object. |
animation.animateScale | Boolean | false | If true, will animate scaling the chart from the center outwards. |
For a pie chart, datasets need to contain an array of data points. The data points should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each.
You also need to specify an array of labels so that tooltips appear correctly
