sChart.js中文文档

# 环形图

# 使用案例

环形图

# HTML

<!-- 需要给.canvas-wrapper元素设置宽高 -->
<div class="canvas-wrapper">
    <canvas id="canvas4"></canvas>
</div>

# JS

const options = {
    type: 'ring',
    title: {
        text: '环形三等分'
    },
    showValue: false,
    legend: {
        position: 'bottom',
        bottom: 40
    },
    bgColor: '#fbfbfb',
    labels: ['vue', 'react', 'angular'],
    datasets: [{
        data: [500, 500, 500]
    }]
};
new Schart('canvas4', options);

# options 配置

参数 说明 必传 类型 默认值
datasets 图表数据，详情 是 array -
labels 每个环扇形的分类或名称，用于图例文本 是 array -
type 图表类型，环形图必须设为ring 是 string bar
showValue 在图表中显示数值 否 boolean true
topPadding 画布内的上边距 否 number 60
leftPadding 画布内的左边距 否 number 50
rightPadding 画布内的右边距 否 number 10
bottomPadding 画布内的下边距 否 number 50
bgColor 画布背景色 否 string #fff
title 标题，详情 否 object -
legend 图例，详情 否 object -
radius 环形图外圆半径 否 number 100
innerRadius 环形图内圆半径 否 number 60
colorList 颜色列表，用于填充环扇形颜色 否 array -

# datasets

参数 说明 必传 类型 默认值
data 图表数据值 是 array -
fillColor 环扇形填充颜色 否 string -

# title

参数 说明 必传 类型 默认值
text 标题文本，没传则不显示标题 否 string -
color 标题颜色 否 string #666
position 标题位置，可选top和bottom 否 string top
font 字体 否 string bold 18px Arial
top position为top时，标题位置与画布顶部距离 否 number 10
bottom position为bottom时，标题位置与画布底部距离 否 number 5

# legend

参数 说明 必传 类型 默认值
display 显示图例 否 boolean true
color 图例文本颜色 否 string #666
position 图例位置，可选top、bottom和left 否 string top
font 字体 否 string 14px Arial
top position为top或left时，图例位置与画布顶部距离 否 number 45
bottom position为bottom时，图例位置与画布底部距离 否 number 15

←