联系我们

sChart.js 中文文档

sChart.js:一个小型简单的图表库。该文档介绍了该库的所有知识。
立即下载

开始使用

引入js文件

首先我们需要在页面中引入Chart.js文件。

<script src="sChart.js"></script>
创建画布

为了创建图表,先要生成一个画布,通过画布的id去实例化一个图标对象。

创建图表

通过实例化sChart对象来生成图表。

new sChart(canvasId, type, data, options)

完成实例化之后,就可以在画布上看到生成的图表了。

柱状图(Bar chart)

使用案例
数据结构
var data = [
    {name:'2012', value:1141},
    {name:'2013', value:1499},
    {name:'2014', value:2260},
    {name:'2015', value:1170},
    {name:'2016', value:970},
    {name:'2017', value:1450}
]
创建图表
new sChart('canvas', 'bar', data, {
    title: '某商店近年营业总额',
    bgColor: '#829dda',
    titleColor: '#ffffff',
    fillColor: '#72f6ff',
    axisColor: '#eeeeee',
    contentColor: '#bbbbbb'
});
图表参数
options = {
    padding: 50,                    // canvas 内边距
    yEqual: 5,                      // y轴分成5等分
    bgColor: '#ffffff',             // 默认背景颜色
    fillColor: '#1E9FFF',           // 默认填充颜色
    axisColor: '#666666',           // 坐标轴颜色
    contentColor: '#eeeeee',        // 内容横线颜色
    title: '',                      // 图表标题
    titleColor: '#000000',          // 图表标题颜色
    titlePosition: 'top'            // 图表标题位置: top / bottom
}

折线图(Line chart)

使用案例
数据结构
var data = [
    {name:'2012', value:1141},
    {name:'2013', value:1499},
    {name:'2014', value:2260},
    {name:'2015', value:1170},
    {name:'2016', value:970},
    {name:'2017', value:1450}
]
创建图表
new sChart('canvas', 'line', data, {
    title: '某商店近年营业总额',
    bgColor: '#829dba',
    titleColor: '#ffffff',
    fillColor: '#72f6ff',
    axisColor: '#eeeeee',
    contentColor: '#bbbbbb'
});
图表参数
options = {
    padding: 50,                    // canvas 内边距
    yEqual: 5,                      // y轴分成5等分
    bgColor: '#ffffff',             // 默认背景颜色
    fillColor: '#1E9FFF',           // 默认填充颜色
    axisColor: '#666666',           // 坐标轴颜色
    contentColor: '#eeeeee',        // 内容横线颜色
    title: '',                      // 图表标题
    titleColor: '#000000',          // 图表标题颜色
    titlePosition: 'top'            // 图表标题位置: top / bottom
}

饼状图(Pie chart)

使用案例
数据结构
var data = [
    {name:'短袖', value:1200},
    {name:'休闲裤', value:1222},
    {name:'连衣裙', value:1283},
    {name:'外套', value:1314},
    {name:'羽绒服', value:2314}
]
创建图表
new sChart('canvas', 'pie', data, {
    title: '某商店各商品年度销量',
    bgColor: '#829dca',
    titleColor: '#ffffff',
    legendColor: '#ffffff'
});
图表参数
options = {
    bgColor: '#ffffff',             // 默认背景颜色
    title: '',                      // 图表标题
    titleColor: '#000000',          // 图表标题颜色
    titlePosition: 'top'            // 图表标题位置: top / bottom
    legendColor: '#000000',         // 图例文本颜色
    legendTop: 40,                  // 图例距离顶部的长度
    colorList: ['#1E9FFF', '#13CE66', '#F7BA2A', '#FF4949', '#72f6ff'],    // 饼图颜色列表
    radius: 100,                    // 饼图半径
}

环形图(Ring chart)

使用案例
数据结构
var data = [
    {name:'短袖', value:1200},
    {name:'休闲裤', value:1222},
    {name:'连衣裙', value:1283},
    {name:'外套', value:1314},
    {name:'羽绒服', value:2314}
]
创建图表
new sChart('canvas', 'ring', data, {
    title: '某商店各商品年度销量',
    bgColor: '#829daa',
    titleColor: '#ffffff',
    legendColor: '#ffffff'
});
图表参数
options = {
    bgColor: '#ffffff',             // 默认背景颜色
    title: '',                      // 图表标题
    titleColor: '#000000',          // 图表标题颜色
    titlePosition: 'top'            // 图表标题位置: top / bottom
    legendColor: '#000000',         // 图例文本颜色
    legendTop: 40,                  // 图例距离顶部的长度
    colorList: ['#1E9FFF', '#13CE66', '#F7BA2A', '#FF4949', '#72f6ff'],    // 环形图颜色列表
    radius: 100,                    // 环形图外圆半径
    innerRadius: 70                 // 环形图内圆半径
}