G2
G2
G6
F2
L7
墨者学院
关于 G2
图表示例
API 文档
使用教程
English
折线图
基础折线图
双折线图
多折线图
其他折线图
条形图
分组条形图
堆叠条形图
基础条形图
柱状图
基础柱状图
分组柱状图
堆叠柱状图
直方图
饼图
环图
玫瑰图
基础饼图
嵌套饼图
点图
散点图
面积图
基础面积图
堆叠面积图
区间面积图
箱形图
箱型图
烛形图
烛形图
热力图
热力图
仪表盘
仪表盘
漏斗图
漏斗图
地图
地图
雷达图
雷达图
分面
分面
关系图
关系图
其他图表
其他
迷你图
组件使用
组件
双折线图
曲线折线图
曲线折线图,用平滑的曲线代替折线。折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化,它的特点是反映事物随时间或有序类别而变化的趋势。
源码
复制成功
复制失败
全屏
复制
运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height"> <title>曲线折线图</title> <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style> </head> <body> <div id="mountNode"></div> <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script> <script> // 在一行中保存多个城市的数据,需要将数据转换成 // {month: 'Jan', city: 'Tokyo', temperature: 3.9} var data = [{ month: 'Jan', Tokyo: 7.0, London: 3.9 }, { month: 'Feb', Tokyo: 6.9, London: 4.2 }, { month: 'Mar', Tokyo: 9.5, London: 5.7 }, { month: 'Apr', Tokyo: 14.5, London: 8.5 }, { month: 'May', Tokyo: 18.4, London: 11.9 }, { month: 'Jun', Tokyo: 21.5, London: 15.2 }, { month: 'Jul', Tokyo: 25.2, London: 17.0 }, { month: 'Aug', Tokyo: 26.5, London: 16.6 }, { month: 'Sep', Tokyo: 23.3, London: 14.2 }, { month: 'Oct', Tokyo: 18.3, London: 10.3 }, { month: 'Nov', Tokyo: 13.9, London: 6.6 }, { month: 'Dec', Tokyo: 9.6, London: 4.8 }]; var ds = new DataSet(); var dv = ds.createView().source(data); // fold 方式完成了行列转换,如果不想使用 DataSet 直接手工转换数据即可 dv.transform({ type: 'fold', fields: ['Tokyo', 'London'], // 展开字段集 key: 'city', // key字段 value: 'temperature' // value字段 }); var chart = new G2.Chart({ container: 'mountNode', forceFit: true, height: window.innerHeight }); chart.source(dv, { month: { range: [0, 1] } }); chart.tooltip({ crosshairs: { type: 'line' } }); chart.axis('temperature', { label: { formatter: function formatter(val) { return val + '°C'; } } }); chart.line().position('month*temperature').color('city').shape('smooth'); chart.point().position('month*temperature').color('city').size(4).shape('circle').style({ stroke: '#fff', lineWidth: 1 }); chart.render(); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height"> <title>曲线折线图</title> <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style> </head> <body style="background: #1f1f1f;"> <div id="mountNode"></div> <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script> <script>G2.Global.setTheme('dark');</script> <script> // 在一行中保存多个城市的数据,需要将数据转换成 // {month: 'Jan', city: 'Tokyo', temperature: 3.9} var data = [{ month: 'Jan', Tokyo: 7.0, London: 3.9 }, { month: 'Feb', Tokyo: 6.9, London: 4.2 }, { month: 'Mar', Tokyo: 9.5, London: 5.7 }, { month: 'Apr', Tokyo: 14.5, London: 8.5 }, { month: 'May', Tokyo: 18.4, London: 11.9 }, { month: 'Jun', Tokyo: 21.5, London: 15.2 }, { month: 'Jul', Tokyo: 25.2, London: 17.0 }, { month: 'Aug', Tokyo: 26.5, London: 16.6 }, { month: 'Sep', Tokyo: 23.3, London: 14.2 }, { month: 'Oct', Tokyo: 18.3, London: 10.3 }, { month: 'Nov', Tokyo: 13.9, London: 6.6 }, { month: 'Dec', Tokyo: 9.6, London: 4.8 }]; var ds = new DataSet(); var dv = ds.createView().source(data); // fold 方式完成了行列转换,如果不想使用 DataSet 直接手工转换数据即可 dv.transform({ type: 'fold', fields: ['Tokyo', 'London'], // 展开字段集 key: 'city', // key字段 value: 'temperature' // value字段 }); var chart = new G2.Chart({ container: 'mountNode', forceFit: true, height: window.innerHeight }); chart.source(dv, { month: { range: [0, 1] } }); chart.tooltip({ crosshairs: { type: 'line' } }); chart.axis('temperature', { label: { formatter: function formatter(val) { return val + '°C'; } } }); chart.line().position('month*temperature').color('city').shape('smooth'); chart.point().position('month*temperature').color('city').size(4).shape('circle').style({ stroke: '#fff', lineWidth: 1 }); chart.render(); </script> </body> </html>
图表简介
曲线折线图,用平滑的曲线代替折线。折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化,它的特点是反映事物随时间或有序类别而变化的趋势。
了解更多
图表用法
在折线图中,数据是递增还是递减、增减的速率、增减的规律(周期性、螺旋性等)、峰值等特征都可以清晰地反映出来。所以,折线图常用来分析数据随时间的变化趋势,也可用来分析多组数据随时间变化的相互作用和相互影响。例如可用来分析某类商品或是某几类相关的商品随时间变化的销售情况,从而进一步预测未来的销售情况。在折线图中,一般水平轴(X轴)用来表示时间的推移,并且间隔相同;而垂直轴(Y轴)代表不同时刻的数据的大小。
关联图表
点图
面积图
相关链接
BizCharts
Viser