1. 程式人生 > >Hicharts柱狀圖使用百分比展示資料

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上看下吧,有註釋的,先搞清了一些基本的名次,再實現效果,就有章可循,簡單多了。