折线图 折线图、平滑曲线图、面积图
Line Chart可以用来画普通的折线图、平滑曲线图、面积图
大数据量支持拖动显示
公司产品销售汇总(2012-2014)
A产品
B产品
拖动鼠标看看
用法
//简单用法
var line = new JChart.Line(data,'#canvasId');
//更多配置
var line = new JChart.Line(data,{
smooth : false
});
//方法
//事件
line.on('tap.point',function(data,i,j){
alert(data);
})配置项
var config = {
smooth : true
}
var line = new JChart.Line(data,config);| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| bgColor | String | #fff | 图表背景 |
| showScaleLabel | Boolean | true | 是否显示刻度值 |
| scaleLineColor | String | rgba(0,0,0,.3) | xy轴刻度线的颜色 |
| scaleLineWidth | Number | 1 | 刻度线宽度 |
| scale | Object | null | 自定义Y轴刻度值，有三个属性： step : 10(刻度的个数) stepValue : 10(每两个刻度线之间的差值) start : 0(起始刻度值) |
| scaleFont | Object |
family : 'Arial' size : 16 style : 'normal' color : '#5b5b5b' textAlign : 'center' textBaseLine : 'Middle' |
刻度值字体 |
| showText | String | true | 是否显示数据文本(显示在连接点上) |
| textFont | Object |
family : 'Arial' size : 16 style : 'normal' color : '#5b5b5b' textAlign : 'center' textBaseLine : 'Middle' |
数据文本字体样式 |
| showGridLine | Boolean | true | 是否显示网格线 |
| gridLineColor | String | rgba(0,0,0,.05) | 网格线颜色 |
| gridLineWidth | Number | 1 | 网格线宽度 |
| smooth | Boolean | true | 平滑曲线 |
| showPoint | Boolean | true | 是否显示线的连接点 |
| pointRadius | Number | 4 | 连接圆点半径 |
| pointBorderWidth | Number | 2 | 连接点的边框宽度 |
| pointClickBounds | Number | 20 | 连接点的点击范围(方便手指触摸) |
| lineWidth | Number | 2 | 连接线的宽度 |
| fill | Boolean | true | 是否填充为面积图 |
| datasetGesture | Boolean | false | 是否可以对数据进行拖动 |
| datasetShowNumber | Number | 12 | 每次显示的数据条数 |
| drawScaleFirst | Boolean | true | 优先画刻度值 |
| animation | Boolean | true | 是否开启动画 |
| animationSteps | Number | 60 | 动画帧数 |
| animationEasing | String | easeOutBounce | 动画函数 |
方法
事件
| 名称 | 参数 | 描述 |
|---|---|---|
| renderYLabel | value:Y轴刻度值 | 渲染Y轴刻度值时触发，返回值会覆盖原来的值 |
| renderText |
value:数据项 i : 数据项在数据子集中索引 j: 子集在总数据集中的索引 |
渲染数据项显示文本时触发，返回值会覆盖原来的值 |
| tap.point |
data:数据项 i : 数据项在数据子集中索引 j: 子集在总数据集中的索引 |
点击连接线的点触发 |
| tap |
x:触摸点距离图表左侧的距离 y:触摸点距离图表顶部的距离 |
点击图表时触发 |
| longTap |
x:触摸点距离图表左侧的距离 y:触摸点距离图表顶部的距离 |
长按图表时触发 |
柱状图
目前只支持简单的柱形图、簇状图
大数据量支持拖动显示
未来会增加堆积图、横向图
公司产品销售汇总(2012-2014)
A产品
B产品
拖动鼠标看看
用法
//简单用法
var bar = new JChart.Bar(data,'#canvasId');
//更多配置
var bar = new JChart.Bar(data,{
showBarBorder : false
});
//方法
//事件
bar.on('tap.bar',function(data,i,j){
alert(data);
})配置项
var config = {
smooth : true
}
var bar = new JChart.Bar(data,config);| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| bgColor | String | #fff | 图表背景 |
| showScaleLabel | Boolean | true | 是否显示刻度值 |
| scaleLineColor | String | rgba(0,0,0,.3) | xy轴刻度线的颜色 |
| scaleLineWidth | Number | 1 | 刻度线宽度 |
| scale | Object | null | 自定义Y轴刻度值，有三个属性： step : 10(刻度的个数) stepValue : 10(每两个刻度线之间的差值) start : 0(起始刻度值) |
| scaleFont | Object |
family : 'Arial' size : 16 style : 'normal' color : '#5b5b5b' textAlign : 'center' textBaseLine : 'Middle' |
刻度值字体 |
| showText | String | true | 是否显示数据文本(显示在柱子上方) |
| textFont | Object |
family : 'Arial' size : 16 style : 'normal' color : '#5b5b5b' textAlign : 'center' textBaseLine : 'Middle' |
数据文本字体样式 |
| showGridLine | Boolean | true | 是否显示网格线 |
| gridLineColor | String | rgba(0,0,0,.05) | 网格线颜色 |
| gridLineWidth | Number | 1 | 网格线宽度 |
| showBarBorder | Boolean | true | 是否显示bar的边框 |
| barBorderWidth | Number | 2 | bar边框宽度 |
| barSpacing | Number | 1 | 每两个bar之间的间距 |
| barSetSpacing | Number | 5 | 每两组bar之间的间距 |
| datasetGesture | Boolean | false | 是否可以对数据进行拖动 |
| datasetShowNumber | Number | 12 | 每次显示的数据条数 |
| drawScaleFirst | Boolean | true | 优先画刻度值 |
| animation | Boolean | true | 是否开启动画 |
| animationSteps | Number | 60 | 动画帧数 |
| animationEasing | String | easeOutBounce | 动画函数 |
方法
| 名称 | 参数 | 描述 |
|---|---|---|
| renderYLabel | value:Y轴刻度值 | 渲染Y轴刻度值时触发，返回值会覆盖原来的值 |
| renderText |
value:数据项 i : 数据项在数据子集中索引 j: 子集在总数据集中的索引 |
渲染数据项显示文本时触发，返回值会覆盖原来的值 |
| refresh | config:同配置参数 | 重新绘制图表，可以采用新的配置项 |
| load |
data : 新数据集 config:同配置参数（可选） |
载入新的数据 |
事件
| 名称 | 参数 | 描述 |
|---|---|---|
| tap.bar |
data:数据项 i : 数据项在数据子集中索引 j: 子集在总数据集中的索引 |
点击柱子时触发 |
| tap |
x:触摸点距离图表左侧的距离 y:触摸点距离图表顶部的距离 |
点击图表时触发 |
| longTap |
x:触摸点距离图表左侧的距离 y:触摸点距离图表顶部的距离 |
长按图表时触发 |
饼图 饼状图、环形图
支持饼图和环形图，多种交互方式
支持半圆形图表(或者任意角度)
网站访问来源
直接访问
联盟广告
视频广告
搜索引擎
用法
//简单用法
//饼图
var pie = new JChart.Pie(data,'#canvasId');
//环形图
var dount = new JChart.Pie(data,{
isDount:true
});
//方法
//事件
pie.on('tap.pullOut',function(data,i){
alert('第'+i+'个扇形弹出了');
})配置项
var config = {
isDount : true,
startAngle : -Math.PI/2
}
var pie = new JChart.Pie(data,config);| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| showSegmentBorder | Boolean | true | 是否显示扇形边框 |
| segmentBorderColor | String | #fff | 扇形边框颜色 |
| segmentBorderWidth | Number | 2 | 扇形边框宽度 |
| totalAngle | Number | Math.PI*2 | 整个图形的角度，默认为圆形 |
| startAngle | Number | -Math.PI/2 | 第一个扇形块开始的地方 默认从12点钟方向顺时针开始 |
| rotateAngle | Number | Math.PI/2 | 旋转扇形，使其中线指向的角度位置。 用于当手点击扇形时自动将扇形旋转到该位置 默认为6点钟方向 |
| pullOutDistance | Number | 10 | 点击扇形弹出的距离 |
| clickType | String | pullOut | 点击扇形自动触发的事件类型。可选值： pullOut : 弹出扇形 rotate : 旋转扇形到指定位置 null : 点击时不做任何处理，但是仍会触发tap.segment事件 |
| isDount | Boolean | false | 是否为环形图 |
| dountRadiusPercent | Number | .4 | 环形图中间的小圆半径所占的比例 |
| dountText | String | '' | 环形图小圆中的文字 |
| dountTextFont | String | bold 30px Arial | 环形图小圆中的文字字体 |
| dountFont | Object |
family : 'Arial' size : 20 style : 'normal' color : '#3498DB' textAlign : 'center' textBaseLine : 'Middle' |
小圆中的文本 |
| drawScaleFirst | Boolean | true | 优先画刻度值 |
| animation | Boolean | true | 是否开启动画 |
| animationSteps | Number | 60 | 动画帧数 |
| animationEasing | String | easeOutBounce | 动画函数 |
方法
| 名称 | 参数 | 描述 |
|---|---|---|
| toggleSegment | i:扇形索引 | 弹出/收起扇形块 |
| pushIn | None | 收起所有弹出的扇形块 |
| pullOut | i:扇形索引 | 弹出指定的扇形块 |
| rotate | i:扇形索引 | 旋转扇形块的中线指向配置中的旋转方向 |
| setDountText | text:新的文本 | 重新设置小圆中的文本 |
| refresh | config:同配置参数 | 重新绘制图表，可以采用新的配置项 |
| load |
data : 新数据集 config:同配置参数（可选） |
载入新的数据 |
事件
| 名称 | 参数 | 描述 |
|---|---|---|
| renderText |
data:数据项 i : 数据项索引 |
渲染数据项显示文本时触发，返回值会覆盖原来的值 | tap.pie |
data:数据项 i : 数据项索引 |
点击扇形时触发，需要返回Boolean结果 若返回false，则后续的pullOut或者rotate都不会执行，即便配置了clickType，返回true会继续执行 |
| longTap.pie |
data:数据项 i : 数据项索引 |
长按扇形时触发 |
| pushIn | None | 收起所有弹出的扇形时触发 |
| pullOut |
data:数据项 i : 数据项索引 |
弹出指定扇形时触发 |
| rotate |
data:数据项 i : 数据项索引 |
旋转指定扇形时触发 |
雷达图
普通的雷达图，支持圆形和菱形
手机A与手机B比较
A手机
B手机
用法
//简单用法
var radar = new JChart.Radar(data,'#canvasId');
//更多配置
var radar = new JChart.Radar(data,{
fill : false
});
//方法
//事件
line.on('tap.point',function(data,i,j){
alert(data);
})配置项
var config = {
fill : true
}
var radar = new JChart.Radar(data,config);| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| bgColor | String | #fff | 图表背景 |
| showScaleLabel | Boolean | true | 是否显示刻度值 |
| scaleLineColor | String | rgba(0,0,0,.3) | xy轴刻度线的颜色 |
| scaleLineWidth | Number | 1 | 刻度线宽度 |
| scale | Object | null | 自定义Y轴刻度值，有三个属性： step : 10(刻度的个数) stepValue : 10(每两个刻度线之间的差值) start : 0(起始刻度值) |
| scaleFont | Object |
family : 'Arial' size : 16 style : 'normal' color : '#5b5b5b' textAlign : 'center' textBaseLine : 'Middle' |
刻度值字体 |
| showText | String | false | 是否显示数据文本(显示在连接点上) |
| textFont | Object |
family : 'Arial' size : 16 style : 'normal' color : '#5b5b5b' textAlign : 'center' textBaseLine : 'Middle' |
数据文本字体样式 |
| showGridLine | Boolean | true | 是否显示网格线 |
| gridLineColor | String | rgba(0,0,0,.5) | 网格线颜色 |
| gridLineWidth | Number | 1 | 网格线宽度 |
| graphShape | String | diamond | 图形形状 diamond:菱形 circle:圆形 |
| showAngleLine | Boolean | true | 是否显示角度分割线 |
| angleLineColor | String | rgba(0,0,0,.1) | 角度分割线颜色 |
| angleLineWidth | Number | 1 | 角度分割线宽度 |
| showPoint | Boolean | true | 是否显示线的连接点 |
| pointRadius | Number | 3 | 连接圆点半径 |
| pointBorderWidth | Number | 1 | 连接点的边框宽度 |
| pointClickBounds | Number | 20 | 连接点的点击范围(方便手指触摸) |
| lineWidth | Number | 2 | 连接线的宽度 |
| fill | Boolean | true | 是否填充为面积图 |
| scaleShowLabelBackdrop | Boolean | true | 是否显示刻度文本背景 |
| scaleBackdropColor | String | rgba(255,255,255,0.75) | 刻度背景颜色 |
| drawScaleFirst | Boolean | true | 优先画刻度值 |
| animation | Boolean | true | 是否开启动画 |
| animationSteps | Number | 60 | 动画帧数 |
| animationEasing | String | easeOutBounce | 动画函数 |
方法
事件
| 名称 | 参数 | 描述 |
|---|---|---|
| renderYLabel | value:Y轴刻度值 | 渲染Y轴刻度值时触发，返回值会覆盖原来的值 |
| renderText |
value:数据项 i : 数据项在数据子集中索引 j: 子集在总数据集中的索引 |
渲染数据项显示文本时触发，返回值会覆盖原来的值 |
| tap.point |
data:数据项 i : 数据项在数据子集中索引 j: 子集在总数据集中的索引 |
点击连接线的点触发 |
| tap |
x:触摸点距离图表左侧的距离 y:触摸点距离图表顶部的距离 |
点击图表时触发 |
| longTap |
x:触摸点距离图表左侧的距离 y:触摸点距离图表顶部的距离 |
长按图表时触发 |
玫瑰图
简单的玫瑰图
网民上网时间分布
用法
//简单用法
var polar = new JChart.Line(data,'#canvasId');
//更多配置
var polar = new JChart.Polar(data,{
showSegmentBorder : false
});
//方法
//事件
polar.on('tap.segment',function(data,i){
alert(data);
})配置项
var config = {
showSegmentBorder : true
}
var polar = new JChart.Polar(data,config);| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| bgColor | String | #fff | 图表背景 |
| showScaleLabel | Boolean | true | 是否显示刻度值 |
| scaleLineColor | String | rgba(0,0,0,.3) | xy轴刻度线的颜色 |
| scaleLineWidth | Number | 1 | 刻度线宽度 |
| scale | Object | null | 自定义Y轴刻度值，有三个属性： step : 10(刻度的个数) stepValue : 10(每两个刻度线之间的差值) start : 0(起始刻度值) |
| scaleFont | Object |
family : 'Arial' size : 16 style : 'normal' color : '#5b5b5b' textAlign : 'center' textBaseLine : 'Middle' |
刻度值字体 |
| showText | String | true | 是否显示数据文本 |
| textFont | Object |
family : 'Arial' size : 16 style : 'normal' color : '#5b5b5b' textAlign : 'center' textBaseLine : 'Middle' |
数据文本字体样式 |
| showGridLine | Boolean | true | 是否显示网格线 |
| gridLineColor | String | rgba(0,0,0,.05) | 网格线颜色 |
| gridLineWidth | Number | 1 | 网格线宽度 |
| showScaleLabelBackdrop | Boolean | true | 是否显示刻度文本背景 |
| scaleBackdropColor | String | rgba(255,255,255,0.75) | 刻度背景颜色 |
| showSegmentBorder | Boolean | true | 是否显示扇形边框 |
| segmentBorderWidth | Number | 2 | 扇形边框宽度 |
| segmentBorderColor | Strng | #fff | 扇形边框颜色 |
| animateRotate | Boolean | true | 是否开启旋转动画 |
| animateScale | Boolean | false | 是否开启缩放动画 |
| animation | Boolean | true | 是否开启动画 |
| animationSteps | Number | 60 | 动画帧数 |
| animationEasing | String | easeOutBounce | 动画函数 |
方法
事件
| 名称 | 参数 | 描述 |
|---|---|---|
| renderText |
data:数据项 i : 数据项在数据集中索引 |
渲染数据项显示文本时触发，返回值会覆盖原来的值 |
| tap.pie |
data:数据项 i : 数据项在数据集中索引 |
点击扇形时触发 |
| tap |
x:触摸点距离图表左侧的距离 y:触摸点距离图表顶部的距离 |
点击图表时触发 |
| longTap |
x:触摸点距离图表左侧的距离 y:触摸点距离图表顶部的距离 |
长按图表时触发 |