Hicharts柱状图使用百分比展示数据

先把代码贴上来把,数据可能不合逻辑,但计算的结果都是正确的。

图表容器:

<div id="container"></div>
var chart = Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            text: '未回款金额-距网签时间占比分析'
        },
        xAxis: {
            categories: [
                '回款负责人1', '回款负责人2', '回款负责人3', '回款负责人4', '回款负责人5'
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: '降雨量 (mm)'
            }
        },
        tooltip: {
            // head + 每个 point + footer 拼接成完整的 table
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                borderWidth: 0,
                dataLabels:{
                    enabled:true,
                    color: "#000",
                    formatter:function () {
                        a = this.y/this.total*100;
                        return this.y + "<br>" + a.toFixed(1) + "%"
                    }
                }
                // colorByPoint: true
            }
        },
        series: [{
            name: '90天以内',
            data: [
                {
                    y: 49.9, total: 200
                }, {
                    y: 71.5, total: 200
                }, {
                    y: 106.4, total: 200
                }, {
                    y: 129.2, total: 200
                }, {
                    y: 144.0, total: 200
                }]
        }, {
            name: '180-365天',
            data: [{
                y: 83.6, total: 200
            }, {
                y: 78.8, total: 200
            }, {
                y: 98.5, total: 200
            }, {
                y: 93.4, total: 200
            }, {
                y: 106.0, total: 200
            }]
        }, {
            name: '90-180天',
            data: [{
                y: 48.9, total: 200
            }, {
                y: 38.8, total: 200
            }, {
                y: 39.3, total: 200
            }, {
                y: 41.4, total: 200
            }, {
                y: 47.0, total: 200
            }]
        }, {
            name: '365天以上',
            data: [{
                y: 42.4, total: 200
            }, {
                y: 33.2, total: 200
            }, {
                y: 34.5, total: 200
            }, {
                y: 39.7, total: 200
            }, {
                y: 52.6, total: 200
            }]
        }]
    });

其实使用hicharts实现这个效果并不算困难,难的地方在于hicharts图表库有很多的api,需要一个熟悉的过程,再就是使用前先理清了图表库中的几个概念,就是坐标轴(x轴,y轴)、数据列、数据、标签、图例等等众多的专属名次,如果不清楚的,就直接从官网(https://api.hcharts.cn/highcharts)api上看下吧,有注释的,先搞清了一些基本的名次,再实现效果,就有章可循,简单多了。

猜你喜欢

转载自blog.csdn.net/hbysj/article/details/82110968