数据可视化【highchart】——横向柱状图

最新推荐文章于 2024-07-24 11:09:48 发布

海面有风

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量860

点赞数

分类专栏：数据可视化-highchart 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_44659458/article/details/125704807

版权

数据可视化-highchart 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

基本案例
在这里插入图片描述
基于案例修改后效果图如下：

在这里插入图片描述
代码：

<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>