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
原创粉丝点击