Hicharts柱狀圖使用百分比展示資料
阿新 • • 發佈:2018-11-05
先把程式碼貼上來把,資料可能不合邏輯,但計算的結果都是正確的。
圖表容器:
<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上看下吧,有註釋的,先搞清了一些基本的名次,再實現效果,就有章可循,簡單多了。