1 <!DOCTYPE html>

  2 <html lang="en">

  3

  4 <head>

  5     <meta charset="UTF-8">

  6     <title>GDP折线图</title>

  7     <script src="./d3.js"></script>

  8     <style>

  9     .axis path,

 10     .axis line {

 11         fill: none;

 12         stroke: black;

 13         shape-rendering: crispEdges;

 14     }

 15

 16     .axis text {

 17         font-family: sans-serif;

 18         font-size: 11px

 19     }

 20     </style>

 21 </head>

 22

 23 <body>

 24     <script>

 25         let dataset = [{

 26             country: 'china',

 27             gdp: [

 28                 [2000, 11920],

 29                 [2001, 13170],

 30                 [2002, 14550],

 31                 [2003, 16500],

 32                 [2004, 19440],

 33                 [2005, 22870],

 34                 [2006, 27930],

 35                 [2007, 35040],

 36                 [2008, 45470],

 37                 [2009, 51050],

 38                 [2010, 59490],

 39                 [2011, 73140],

 40                 [2012, 83860],

 41                 [2013, 103550],

 42             ]

 43         }, {

 44             country: "japan",

 45             gdp: [

 46                 [2000, 47310],

 47                 [2001, 41590],

 48                 [2002, 39800],

 49                 [2003, 43020],

 50                 [2004, 46550],

 51                 [2005, 45710],

 52                 [2006, 43560],

 53                 [2007, 43560],

 54                 [2008, 48490],

 55                 [2009, 50350],

 56                 [2010, 54950],

 57                 [2011, 59050],

 58                 [2012, 59370],

 59                 [2013, 48980],

 60             ]

 61         }];

 62         // svg画布

 63         let width = 600;

 64         let height = 600;

 65         let svg = d3.select("body").append('svg')

 66             .attr('width', width)

 67             .attr('height', height)

 68         // 外边框

 69         let padding = { top: 50, right: 50, left: 50, bottom: 50};

 70         // 计算gdp最大值

 71         let gdpMax = 0;

 72         for(let i = 0; i<dataset.length; i++) {

 73             let currGdp = d3.max(dataset[i].gdp, function(d) {

 74                 return d[1];

 75             });

 76             if(currGdp > gdpMax) {

 77                 gdpMax = currGdp

 78             }

 79         }

 80         // 定义比例尺

 81         let xScale = d3.scale.linear()

 82             .domain([2000, 2013])

 83             .range([0, width - padding.left - padding.right]);

 84         let yScale = d3.scale.linear()

 85             .domain([0, gdpMax * 1.1])

 86             .range([(height - padding.top - padding.bottom), 0]);

 87

 88         // 创建一个线段生成器

 89         let linePath = d3.svg.line()

 90             .x(function(d) {

 91                 return xScale(d[0])

 92             })

 93             .y(function(d) {

 94                 return yScale(d[1]);

 95             })

 96             .interpolate('cardinal');

 97         // 定义两个颜色

 98         let colors = [d3.rgb(0, 0, 255), d3.rgb(0, 255, 0)];

 99         // 添加路径

100         svg.selectAll("path")

101             .data(dataset)

102             .enter()

103             .append('path')

104             .attr('d', function(d) {

105                 return linePath(d.gdp); //返回线段生成器得到的路径

106             })

107             .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')

108             .attr('fill', 'none')

109             .attr('stroke', function(d, i) {

110                 return colors[i]

111             })

112             .attr('stroke-width', '3px');

113         // 创建坐标值

114         let xAxis = d3.svg.axis()

115             .scale(xScale)

116             .ticks(5)

117             .tickFormat(d3.format("d"))

118             .orient("bottom");

119         let yAxis = d3.svg.axis()

120             .scale(yScale)

121             .orient("left");

122         // 添加坐标轴

123         svg.append('g')

124             .attr('class', 'axis')

125             .attr('transform', 'translate(' + padding.left + ',' + (height - padding.bottom) + ')')

126             .call(xAxis);

127         svg.append('g')

128             .attr('class', 'axis')

129             .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')

130             .call(yAxis);

131         // 添加矩形

132         svg.selectAll('rect')

133             .data(dataset)

134             .enter()

135             .append('rect')

136             .attr('width', 20)

137             .attr('height', 15)

138             .attr('fill', function(d, i) {

139                 return colors[i]

140             })

141             .attr('x', function(d, i) {

142                 return padding.left + 80 * i;

143             })

144             .attr('y', height - padding.bottom)

145             .attr('transform', 'translate(20,30)');

146         // 添加文字

147         svg.selectAll('.text')

148             .data(dataset)

149             .enter()

150             .append('text')

151             .attr('font-size', '14px')

152             .attr('text-anchor', 'middle')

153             .attr('fill', '#000')

154             .attr('x', function(d, i) {

155                 return padding.left + 80 * i

156             })

157             .attr('y', height - padding.bottom)

158             .attr("dx", "40px")

159             .attr('dy', '0.9em')

160             .attr('transform', 'translate(20, 30)')

161             .text(function(d) {

162                 return d.country

163             })

164     </script>

165 </body>

166

167 </html>

GDP折线图的更多相关文章

  1. 4-Highcharts曲线图之时间轴折线图

    鼠标按住左键 左右移动可以试试<!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts曲线图之时间轴 ...

  2. 3-Highcharts曲线图之显示点值折线图

    直接上代码  根据代码注释讲解 <!DOCTYPE> <html lang='en'> <head> <title>3-Highcharts曲线图之显示 ...

  3. 利用python进行折线图，直方图和饼图的绘制

    我用10个国家某年的GDP来绘图,数据如下: labels   = ['USA', 'China', 'India', 'Japan', 'Germany', 'Russia', 'Brazil', ...

  4. JavaScript数据可视化编程学习（一）Flotr2，包含简单的，柱状图，折线图，饼图，散点图

    一.基础柱状图 二.基础的折线图 三.基础的饼图 四.基础的散点图 一.基础柱状图 如果你还没有想好你的数据用什么类型的图表来展示你的数据,你应该首先考虑是否可以做成柱状图.柱状图可以表示数据的变化过 ...

  5. highcharts.js的时间轴折线图

    工作中正好用到. 鼠标按住左键 左右移动可以试试 <!DOCTYPE> <html lang='en'> <head> <title>4-Highcha ...

  6. D3.js(v3)+react 制作 一个带坐标轴与比例尺的折线图

    本章使用路径生成器来绘制一个折线图.以中国和日本的GDP数据为例:   //数据 var dataList = [ { coountry : "china", gdp : [ [2 ...

  7. matplotlib折线图

    绘制折线图:参考https://baijiahao.baidu.com/s?id=1608586625622704613           (3)近10年GDP变化的曲线图,及三次产业GDP变化的曲 ...

  8. C# 实时折线图，波形图

    此Demo是采用VS自带的Chart图表控件,制作实时动态显示的折线图,和波形图. 涉及到知识如下: Chart 控件,功能强大,可以绘制柱状图,折线图,波形图,饼状图,大大简化了对图的开发与定制. ...

  9. Android开发学习之路-自定义控件（天气趋势折线图）

    之前写了个天气APP,带4天预报和5天历史信息.所以想着要不要加一个折线图来显示一下天气变化趋势,难得有空,就写了一下,这里做些记录,脑袋不好使容易忘事. 先放一下效果: 控件内容比较简单,就是一个普 ...

  10. react-echarts之折线图的显示

    react中想要实现折线图和饼图的功能,需要引入react-echarts包,然后再实现折线图的功能.我这里引用的版本是:0.1.1.其他的写法参echarts官网即可.下面详细讲解的是我在react ...

随机推荐

  1. jdk10的var局部变量类型推理

    注:本人参考了openjdk官网,由于openjdk是开源的,所以不存在侵权行为,本章只为学习,我觉得没有什么比官网更具有话语权 1.jdk10的var的类型推测:就是这种处理将仅限于具有初始值设定项 ...

  2. [ABC246A] Four Points

    Problem Statement There is a rectangle in the $xy$-plane. Each edge of this rectangle is parallel to ...

  3. .NET8 AOT和JIT的性能，谁更高呢？

    一: 有人问:.NET8 AOT和JIT的性能,谁更高呢? 原文:.NET8 AOT和JIT的性能,谁更高呢? 其实这个答案非常明显,那就是JIT的性能更高.为什么?原因在哪?因为JIT是随时可能分层 ...

  4. 华为防火墙1day?

    背景信息 缺省情况下,FW通过8887端口提供内置的本地Portal认证页面,用户可以主动访问或HTTP重定向至认证页面(https://接口IP地址:8887)进行本地Portal认证. 当企业部署 ...

  5. MyBatisPlus配置类-配置分页插件，注册为bean对象

    import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor; import org.mybatis.spring.a ...

  6. 红日靶场2-wp

    红日靶场2 环境搭建 靶场配置 靶场拓扑图如下: 首先先新建一个网卡, PC PC端虚拟机相当于网关服务器,所以需要两张网卡,一个用来向外网提供web服务,一个是通向内网. 由于作者默认的网段设置为1 ...

  7. VisionPro学习笔记（6）——如何使用QuickBuild

    如果需要了解其他图像处理的文章,请移步小编的GitHub地址 传送门:请点击我 如果点击有误:https://github.com/LeBron-Jian/ComputerVisionPractice ...

  8. Spring Boot整合Spring Data连接postgreSQL完成简单的CRUD操作

    导入jpa依赖和postgresql依赖: <!-- jpa依赖 --> <dependency> <groupId>org.springframework.boo ...

  9. [python]常用配置读取方法

    前言 常见的应用配置方式有环境变量和配置文件,对于微服务应用,还会从配置中心加载配置,比如nacos.etcd等,有的应用还会把部分配置写在数据库中.此处主要记录从环境变量..env文件..ini文件 ...

  10. 8、Flutter Paddiing组件

    Padding组件处理容器与子元素之间的间距. class MyApp extends StatelessWidget { const MyApp({super.key}); @override Wi ...