simple doughnut chart

安装

npm i --save simple-doughnut-chart

特点

• 兼容所有浏览器（包括ie6,7,8），需引入excanvas.js，请看git仓库示例代码
• 更好的支持retina屏
• 支持过渡动画（ie9及其他主流浏览器）

使用

import DoughnutChart from 'simple-doughnut-chart';

new DoughnutChart(document.getElementById('canvas'), {
    canvasSize: 150,            // canvas宽高大小
    doughnutSize: 12,           // 圆环直径大小
    defaultTextSize: 15,        // 默认文字大小
    activeTextSize: 25,         // 激活文本大小
    defaultColor: '#eee',       // 圆环默认颜色
    defaultTextColor: '#ccc',   // 默认文本颜色
    activeColor: '#13b0df',     // 圆环激活颜色
    percentageColor: '#13b0df', // 百分比文字颜色，如果未传，则为圆环激活颜色
    percentage: 88,             // 百分比，text不传或值为空字符串，则居中显示
    decimalPointDigit: 0,       // 保留的小数点位数，默认为0，如果小数点末尾为0，则不显示
    forceDecimalPointDigit: -1,  // 强制保留的小数点位数，默认为-1，不做强制处理，当值设置大于等于0时，且百分比小数点末尾为0，也将显示，将会覆盖decimalPointDigit的值
    text: '正确率',              // 文本
    duration: 1500,             // 动画持续时间，为0将禁用过渡动画
    dashWidth: 12,              // (百分比占位符)破折号宽
    dashHeight: 4,              // 破折号高
    dashMargin: 6,              // 破折号之间的间隔
    dashLength: 3,               // 破折号个数
    dashColor: '#eee',           // 破折号颜色

    // 1.3.0版本新增配置项
    textPosition: 'top',        // 文本位置，默认为bottom位于百分比下方，可选值(bottom|top)
    gradientColors: [],         // 适用于激活的圆环，圆环线型渐变颜色值，如[red, green]，如果不是空数组将覆盖activeColor配置
    percentTextSize: 0,         // 百分数文字大小，如果该值大于0，将覆盖activeTextSize

    // 1.3.1版本新增配置项
    percentSymbolTextColor: '', // 百分比符号颜色，如果未设置或者为空，则内部取(percentageColor|activeColor)
    percentSymbolTextSize: 0,   // 百分比符号字体大小，如果未设置或者0，则内部取(percentTextSize|activeTextSize)
    percentSymbolTextBaseline: 'middle', // 百分比符号字体基线，默认为'middle'，可选值(top|middle|bottom)
});

预览图