Highcharts实现圆角柱形图
来源:互联网 发布:车险计算软件 编辑:程序博客网 时间:2024/06/16 21:37
Highcharts实现圆角柱形图
在柱形图中,柱体的边角只提供直角形式,不够美观。如果设置为圆角,则可以提升柱体的美观度。实现圆角柱体,需要借助第三方插件Rounded-Corners。该插件为柱形图和条形图增加了四个配置项:
左上角圆角半径:borderRadiusTopLeft:Number
右上角圆角半径:borderRadiusTopRight:Number
左下角圆角半径:borderRadiusBottomLeft:Number
右下角圆角半径:borderRadiusBottomRight:Number
通常,左上角和右上角圆角半径用于设置向上的柱体圆角,左下角和右下角圆角半径用于设置向下的柱体圆角。
圆角柱形图
在柱形图中,柱体的边角只提供直角形式,不够美观。如果设置为圆角,则可以提升柱体的美观度。实现圆角柱体,需要借助第三方插件Rounded-Corners。该插件为柱形图和条形图增加了四个配置项:
左上角圆角半径:borderRadiusTopLeft:Number
右上角圆角半径:borderRadiusTopRight:Number
左下角圆角半径:borderRadiusBottomLeft:Number
右下角圆角半径:borderRadiusBottomRight:Number
通常,左上角和右上角圆角半径用于设置向上的柱体圆角,左下角和右下角圆角半径用于设置向下的柱体圆角。
圆角柱形图
PS:该内容已经增补到《网页图表Highcharts实践教程图表篇》v1.2.2中。
Rounded-Corners.js下载地址 http://download.csdn.net/detail/qq_36291682/9770799
使用方法:
Rounded-Corners.js引入到hightchart.js后边
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2],
borderRadiusTopLeft: 5, //这里设置 一共四个属性 这里就设置2个 也就是上边是圆形的 下边不变 如果想下边变得话 设置其他两个属性就行了
borderRadiusTopRight: 5
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2012',
data: [1052, 954, 4250, 740, 38]
}]
1 0
- Highcharts实现圆角柱形图
- Highcharts实现圆角柱形图
- Highcharts实现圆角柱形图
- MPAndroidChart 圆角柱状图
- 自定义视图---圆角柱状图(一)
- 【View】之【SimplePillarsView】可多色可圆角柱状图【demo】
- highcharts 实现统计图柱图
- MVC3+highcharts实现饼图
- HighCharts 折线图的实现
- HighCharts 折线图,柱形图,饼图实现
- MVC3+highcharts 动态实现柱图
- 利用highcharts实现实时动态折线图
- HighCharts静态柱状图实现
- highcharts实现简单饼状图
- Highcharts动态实现柱形图
- HighCharts 柱状图的实现
- Highcharts动态实现柱形图
- php实现动态折线图,highcharts折线图
- ogg参数解析
- blk_peek_request
- xml自动提示
- 18 Linux which
- Qt QComboBox自定义的下拉框
- Highcharts实现圆角柱形图
- caffe学习笔记11-deploy.prototxt学习
- 数据库存储过程、函数、触发器的区别
- 矩阵快速幂
- 【Redis】Java中使用Jedis操作Redis(Maven导入包)、创建Redis连接池
- 区间覆盖
- java 企业网站源码模版 有前后台 springmvc SSM 生成静态化
- 同一环境下新建Standby RAC库
- 3月5日,TestFrame,每日20行。