Highcharts应用--百分比条形图
来源:互联网 发布:深圳软件开发外包公司 编辑:程序博客网 时间:2024/06/05 02:30
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
现有一个需求,用条形图的方式,同时显示数据和百分比
highcharts条形图中没有提供显示百分比的API,只有百分比堆叠柱状图和饼图可以显示,调用的接口是this.percentage,普通的柱状图和条形图想要显示百分比需要调用formatter格式化输出百分比。
$(function () { $('#container').highcharts({ chart: { type: 'bar' }, title: { text: '各洲不同时间的新生婴儿数量与本洲总人数占比条形图' }, xAxis: { categories: ['非洲', '美洲', '亚洲', '欧洲'], title: { text: null } }, yAxis: { min: 0, title: { text: '人口总量 (百万)', align: 'high' }, labels: { overflow: 'justify' } }, tooltip: { valueSuffix: ' 百万' }, plotOptions: { bar: { dataLabels: { enabled: true, //显示数量提示 color: '#000000', formatter : function() { a = this.y/this.total*100; //a为当前柱状图y轴值除以总数然后乘以100 return this.y+"百万<br/>"+a.toFixed(2) + "%"; //返回百分比和个数 } } } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -40, y: 100, floating: true, borderWidth: 1, backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), shadow: true }, credits: { enabled: false }, series: [{ name: '1900 年', data: [ { y:20,total:100 }, { y:29,total:802 }, { y:10,total:900 }, { y:33,total:195 } ] },{ name: '2000 年', data: [ { y:56,total:300 }, { y:35,total:340 }, { y:48,total:900 }, { y:66,total:255 } ] }] });});
0 0
- Highcharts应用--百分比条形图
- highcharts 饼图显示数量和百分比
- FLEX 条形图(柱状图)设置刻度为百分比
- SpringMVC整合Highcharts(基本饼图,条形图,柱状图)
- HighCharts报表之条形统计图
- HighCharts柱状图显示百分比
- Highcharts应用--动态玫瑰图
- 条形图
- 条形图
- 6、Power View—条形图的应用
- Highcharts 中给图例加百分比
- jQuery条形图插件
- 顺序排列的条形图
- excel 双向条形图
- Matlab绘制条形图
- Matlab绘制条形图
- hdu1506 条形图
- EXTJS barchart条形图
- 嵌入式操作系统与物联网演进之路
- 阿里云配置JAVA开发环境并部署WAR包
- php5.2 、5.3、5.4、5.5、5.6 各个版本升级不兼容点
- Date格式的时间,后面有个.0的处理方式
- ptmx/pts
- Highcharts应用--百分比条形图
- 关于jw和e^jwt的领悟
- PHP的ECSHOP商城的改造成MVC添加商品功能总结
- Tensorflow常识
- 团队用过最好的bug管理软件-delbug管理
- centos7使用setup
- 记微信开发牢骚
- PyQt4学习笔记---------------Day_1(Demo_1.pyw)
- Aircrack-ng 使用 【转载】