本文主要是介绍数据可视化【highchart】——横向柱状图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
基本案例
基于案例修改后效果图如下：
代码：
<html><head><meta charset="utf-8" /></head><style>.container {width: 600px;margin: 20px auto;padding: 20px;box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);border-radius: 12px;text-align: center;}h1 {border-bottom: 3px solid #000;padding-bottom: 12px;}</style><body><div class="container"><h1>应用使用时长</h1><div id="highchart"></div></div></body><script src="./js/jquery.min.js"></script><script src="./js/highcharts.js"></script><script>let max = 21600;let min = 3600;let appxa = ["王者荣耀","微信","百度网盘","VS code","网易云","QQ","谷歌浏览器","新浪微博微博","微信开发者工具",];let option = {chart: {type: "bar",},colors: ["#D84E13"],title: {text: null,},legend: {enabled: false,},credits: {enabled: false,},xAxis: {lineWidth: 0,gridLineWidth: 0,},yAxis: {min: 0,title: {text: null,},labels: {enabled: false,},lineWidth: 0,gridLineWidth: 0,},tooltip: {pointFormat:'<span style="color:#D84E13">\u25CF</span>{series.name} : {point.time}<br/>',},plotOptions: {series: {borderRadius: 6,},bar: {dataLabels: {enabled: true,align: "left",style: {fontWeight: "normal",textOutline: "none",},formatter: function () {return this.point.time;},},},},series: [{name: "使用时间",data: [],},],};$(function () {let fomatDate = (sec) => {let h = Math.floor(sec / 3600);let m = Math.floor((sec % 3600) / 60);return `${h}小时${m}分钟`;};for (let i = 0; i < 9; i++) {let time = min + Math.round(Math.random() * (max - min));option.series[0].data[i] = {name: appxa[i],y: time,time: fomatDate(time),dataLabels: {inside: time > 7200 ? true : false,style: {color: time > 7200 ? "#fff" : "#000",},},};}// 排序option.series[0].data.sort((a, b) => {return b.y - a.y;});// 设置 x轴let formatName = [];for (let j = 0; j < appxa.length; j++) {formatName[j] = option.series[0].data[j].name;}option.xAxis.categories = formatName;$("#highchart").highcharts(option);});</script>
</html>这篇关于数据可视化【highchart】——横向柱状图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
