chartjs-plugin-doughnutlabel
所属分类：视频/语音聊天
开发工具：JavaScript
文件大小：0KB
下载次数：0
上传日期：2021-08-06 21:08:09
上 传 者：
sh-1993
说明： Chart.js插件，用于圆环图，在中心显示文本，
(Chart.js plugin for doughnut chart to display text in the center,)
文件列表:
.eslintrc.yml (89, 2019-05-22)
LICENSE (1070, 2019-05-22)
gulpfile.js (2313, 2019-05-22)
package-lock.json (150265, 2019-05-22)
package.json (962, 2019-05-22)
rollup.config.js (128, 2019-05-22)
samples/ (0, 2019-05-22)
samples/favicon.ico (32988, 2019-05-22)
samples/index.css (2212, 2019-05-22)
samples/index.html (1287, 2019-05-22)
samples/index.js (3424, 2019-05-22)
samples/style.css (2645, 2019-05-22)
samples/utils.js (469, 2019-05-22)
src/ (0, 2019-05-22)
src/defaults.js (670, 2019-05-22)
src/plugin.js (2449, 2019-05-22)
src/utils.js (1357, 2019-05-22)
# Chart.js Doughnut plugin to allow for lines of text in the middle
Chart.js plugin module that allows to display multiple lines of text centered in the middle area of the doughnut charts
## Demo
Have a look at the [Demo page](https://ciprianciurea.github.io/chartjs-plugin-doughnutlabel/samples/index.html).
## Table of contents
- [Installation](#installation)
- [Usage example](#usage)
- [Development](#development)
- [License](#license)
## Installation
Install through npm:
```
npm install --save chartjs-plugin-doughnutlabel
```
## Usage
```
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: {
plugins: {
doughnutlabel: {
labels: [
{
text: 'The title',
font: {
size: '60'
}
},
{
text: getTotal,
font: {
size: '50'
},
color: 'grey'
},
{
text: '$100.000',
font: {
size: '30'
},
color: 'red'
},
{
text: '95%',
font: {
size: '45'
},
color: 'green'
}
]
}
}
}
});
var getTotal = function(myDoughnutChart) {
var sum = myDoughnutChart.config.data.datasets[0].data.reduce((a, b) => a + b, 0);
return `Total: ${sum}`;
}
```
### Usage without a module bundler
The plugin can be manually downloaded from the
[Releases page on GitHub!](https://github.com/ciprianciurea/chartjs-plugin-doughnutlabel/releases)
```
```
or use the minified version
```
```
## Development
You first need to install node dependencies (requires [Node.js](https://nodejs.org/)):
> npm install
The following commands will then be available from the repository root:
> gulp lint // perform code linting
> gulp build // build dist files
> gulp build --watch // build and watch for changes
> gulp package // create an archive with dist files and samples
## In Angular
For an example on how to use this plugin with angular, please check this stackblitz prototype:
[doughnutlabel plugin in angular](https://stackblitz.com/edit/angular-v9tfg7)
## License
`chartjs-plugin-doughnutlabel` is available under the [MIT license](LICENSE.md).
近期下载者：
相关文件：
收藏者：