g2.Chart折线图绘制

g2.Chart折线图绘制

前端HTML

目录
一、官方文档
二、g2.Chart折线图绘制
（一）、引入g2.js
（二）、创建 div 图表容器
（三）、绘图
1、静态数据
2、动态数据
一、官方文档
https://www.yuque.com/antv/g2-docs/api-chart#legend

二、g2.Chart折线图绘制
（一）、引入g2.js
<!-- 引入在线资源 -->
<script src="https://gw.alipayobjects.com/as/g/datavis/assets/1.0.5/g2/3.0.0/g2.min.js"></script>
<!-- 引入本地脚本 -->
<script src="./g2.js"></script>


（二）、创建 div 图表容器
<div id="chart"></div>
1
（三）、绘图
1、静态数据
    var data = [{date: '2018/8/1', type: '首页', value: 4623},
                {date: '2018/8/1', type: '中国模块详情', value: 2208},
                {date: '2018/8/1', type: '中国模块结算', value: 182},
                {date: '2018/8/1', type: '合同申请', value: 289},
                {date: '2018/8/1', type: '中国模块支付', value: 257},
                {date: '2018/8/2', type: '首页', value: 6145},
                {date: '2018/8/2',type: '中国模块详情', value: 2016},
                {date: '2018/8/2', type: '中国模块结算', value: 257},
                {date: '2018/8/2', type: '合同申请', value: 289},
                {date: '2018/8/2', type: '中国模块支付', value: 257},
                {date: '2018/8/3', type: '首页',value: 508},
                {date: '2018/8/3', type: '中国模块详情', value: 2916},
                {date: '2018/8/3', type: '中国模块结算', value: 289},
                {date: '2018/8/3', type: '中国模块支付', value: 257},
                {date: '2018/8/3', type: '合同申请', value: 289}];

                // 图表创建
                   var Frame = G2.Frame;
                    var chart = new G2.Chart({
                           container: "chart",
                           padding:[20, 300, 80, 100]
                   });

                //装载数据
                    chart.source(data);   // 载入数据源
                    chart.source(data, {
                        'date': {
                             type: 'cat',  //分类
                            alias:"日期"  //别名
                         },
                        'value':{
                            alias:"浏览数量"
                         }
                  });

                //坐标轴配置(法一配置)
                    chart.axis('date', {// 坐标轴
                        label: {
                             textStyle: {
                                fill: '#aaaaaa'
                             }
                         }
                     });
                     chart.axis('value', {
                         label: {
                             textStyle: {
                                 fill: '#aaaaaa'
                             },
                             formatter: function formatter(text) {// 格式化参数值
                                 return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
                             }
                         }
                     });

            //设置坐标系类型  transpose():将坐标系 x 轴和 y 轴转置
            // chart.coord("rect").transpose();

            // chart.legend(false); 图例禁用

             //图例设置
             chart.legend({
                    marker: 'circle',  //图例的 marker 样式
                    position: 'right', //位置
                    offsetX: 30,      
                    useHtml: true,//使用Html绘制图例
                    flipPage:true//图例超出容器是否滚动
              });

              //绘制折线图
              chart.line().position('date*value').color('type');  //x轴:date  y轴：value ，折线根据type分颜色
              //设置折点样式
              chart.point().position('date*value').size(3).color('type').shape('circle');

            //图表绘制的最后一步，用于将图表渲染至画布
            chart.render();

2、动态数据

                // 图表创建
                   var Frame = G2.Frame;
                    var chart = new G2.Chart({
                           container: "chart",
                           padding:[20, 300, 80, 100]
                   });

                //装载数据
                    //chart.source(data);  载入数据源
                    chart.source([], {
                        'date': {
                             type: 'cat',  //分类
                            alias:"日期"  //别名
                         },
                        'value':{
                            alias:"浏览数量"
                         }
                  });

                //坐标轴配置(法二配置 )
                 chart.scale({
                        date: {
                            type: 'cat', // 声明 type 字段为分类类型
                            alias: '日期' // 设置属性的别名
                        },
                        value: {
                            min:0,
                            alias: '次数' // 设置属性的别名
                        }
                    });

            //设置坐标系类型  transpose():将坐标系 x 轴和 y 轴转置
            // chart.coord("rect").transpose();
            // chart.legend(false); 图例禁用

             //图例设置
             chart.legend({
                    marker: 'circle',  //图例的 marker 样式
                    position: 'right', //位置
                    offsetX: 30,      
                    useHtml: true,//使用Html绘制图例
                    flipPage:true//图例超出容器是否滚动
              });

              //绘制折线图
              chart.line().position('date*value').color('type');  //x轴:date  y轴：value ，折线根据type分颜色
              //设置折点样式
              chart.point().position('date*value').size(3).color('type').shape('circle');

            //图表绘制的最后一步，用于将图表渲染至画布
            chart.render();

// 加载数据
                    var $dateList=$("#dateList");
                    function loadData() {
                        $browseStatisticForm.ajaxSubmit({
                            success: function(data, textStatus, xhr, $form) {
                                if(data){
                                    // console.log("----"+JSON.stringify(data));打印至前端控制台
                                    $dateList.find("li").remove();
                                    $.each(data, function(i, e) {//data格式为List<Map<String,Object>>，i为下标，e为data的每一项（即每一个map）
                                        if(e.dateList){//dateList为其中一个Map的key,他的value是一个日期的List集合(对应上一行注释的Object)
                                            var rankingType = $rankingType.val();
                                            var size = $size.val();
                                            $.each(e.dateList,function (index,element) {//遍历dataList集合，index为下标，element为dataList的每一项（即每一个日期）
                                                var url ="${base}/admin/browse_statistic/recordDetail?recordDateStr="+element.toString()+"&rankingType="+rankingType;
                                                var path=encodeURI(url.replace(/ /g, "%20"));//将日期中的空格替换为“20%”
                                                var str ="<li><a href="+path+">"+element+"</a></li>";
                                                $dateList.append (str);//动态生成<li>并添加至已准备好的<ul>下
                                            })
                                        }
                                    });
                                }
                                chart.changeData(data);//将数据加载至chart图表中
                                chart.leg
                                chart.forceFit();
                            }
                        });
                    };

                    loadData();



//准备好接收动态<li>的<ul>
        <div class="btn-group">
             <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                     查看详情<span class="caret"></span>
             </button>
             <ul class="dropdown-menu" id="dateList">
             </ul>
        </div>

动态数据–效果图：