基于highcharts的带数据标签的折线图实现

最新推荐文章于 2024-07-20 10:10:38 发布

小小鱼34309335

最新推荐文章于 2024-07-20 10:10:38 发布

阅读量1.5k

点赞数

分类专栏：前端layui java web

本文链接：https://blog.csdn.net/qq_34309663/article/details/81836698

版权

java web 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

前端layui

14 篇文章 0 订阅

订阅专栏

最近的项目需要实现折线图和圆饼图，研究了highcharts一段时间后，成功的实现了这两个图的显示方法。本文只讨论折线图的实现方式。前端采用layui,jquery,html5等技术，后端采用ssm框架。本次只是演示，故后端只在controller层中添加假数据，并没有访问mybatis层。

现在开始贴代码：

<head>
   <meta charset="UTF-8">
   <title></title>
   <link rel="stylesheet" href="statics/layui/css/layui.css"  media="all">
   <script src="statics/layui/layui.js" type="text/javascript"></script>
   <!--Highcharts从4.2.0开始，已经不依赖jQuery，如果你的页面中不需要 jQuery，那么无需引入-->
   <script src="statics/Highcharts-4.2.6/js/highcharts.js"></script>
   <script src="statics/Highcharts-4.2.6/js/highcharts-more.js"></script>
   <script src="statics/Highcharts-4.2.6/js/modules/exporting.js"></script>
</head>
<body>
<div style="margin: 15px">
   <blockquote class="layui-elem-quote">
      <div class="layui-btn-group demoTable" style="float: left">
         <button class="layui-btn layui-btn-normal" data-type="importExcel" name="uploadExcel" id="uploadExcel" style="margin-left: 10px!important;">批量导入</button>
      </div>
      <div class="demoTable" style="float: right">
         搜索：
         <div class="layui-inline">
            <input class="layui-input" name="Name" id="demoReload" placeholder="请输入XXX" autocomplete="off">
         </div>
         <button class="layui-btn" data-type="reload"><i class="layui-icon">&#xe615;</i>搜索</button>
      </div>
      <div style="clear: both"></div>
   </blockquote>
</div>
<div id="container"  style="min-width:400px;height:400px"></div>

其中不要忘了导入相应的js文件，highcharts从4.2.0版本开始不再需要导入jquery。然后就是container容器，用来在之后存放折线图的。

下面是js部分

<script type="text/javascript">
   layui.use(['form','layer','layedit','laydate','upload','table'],function() {
      var form = layui.form;
      layer = parent.layer === undefined ? layui.layer : top.layer,
            laypage = layui.laypage,
            upload = layui.upload,
            layedit = layui.layedit,
            laydate = layui.laydate,
            $ = layui.jquery,
            table = layui.table;

      var myDate=new Date;//用来动态显示当前年份
      var zhexianData=[];//定义为数组类型，用来存放折线图的数据


      $(document).ready(function () {
         $.ajax({
            type: "GET",
            url: 'dataShow/queryZhexian',//提供数据的Servlet
            success: function (data) {
               //迭代，把异步获取的数据放到数组中
               $.each(data, function (i,d) {//遍历处理data，可以是数组、DOM、json等，取决于直接给定或者ajax返回的类型
                  zhexianData.push(d);
               });
               chart.series[0].setData(zhexianData);
            },
            error: function (e) {
               alert(e);
            }
         });
      });

      var chart = Highcharts.chart('container', {
         chart: {
            type: 'line'
         },
         title: {
            text: '每个月营业额'
         },
         subtitle: {
            text: '数据来源: WorldClimate.com'
         },
         xAxis: {
            categories: [ '八月', '九月', '十月', '十一月', '十二月','一月', '二月', '三月', '四月', '五月', '六月', '七月']
         },
         yAxis: {
            title: {
               text: '金额(元)'
            }
         },
         plotOptions: {
            line: {
               dataLabels: {
                  // 开启数据标签
                  enabled: true
               },
               // 关闭鼠标跟踪，对应的提示框、点击事件会失效
               enableMouseTracking: false
            }
         },
         series: [
            {
               name:myDate.getFullYear()+"年",//获取当前年份
               data:zhexianData               //数据部分
             }
         ]
      });
   });
</script>

下面是后端代码：

@RequestMapping(value="/queryZhexian",method = RequestMethod.GET)
@ResponseBody
public int [] queryZhexian(){//返回数组类型
    int [] z=new int [12];
    int turnover=0;
    int k=0;
    for(int i=0;i<12;i++){//产生假数据
        turnover+=5000;
        z[k++]=turnover;
    }
   return z;
}

最后是实现出来的结果