标签：g2 var chart value Chart date 2018 折线图 type
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
标签：g2,var,chart,value,Chart,date,2018,折线图,type 来源： https://www.cnblogs.com/webSnow/p/15344075.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。