g2.Chart折线图绘制

一、官方文档

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、静态数据

    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>

动态数据–效果图：