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>
动态数据–效果图：
————————————————
版权声明：本文为CSDN博主「ran_fish」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ranran_fish/article/details/103295851