GDP折线图
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折线图的更多相关文章
- 4-Highcharts曲线图之时间轴折线图
鼠标按住左键 左右移动可以试试<!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts曲线图之时间轴 ...
- 3-Highcharts曲线图之显示点值折线图
直接上代码 根据代码注释讲解 <!DOCTYPE> <html lang='en'> <head> <title>3-Highcharts曲线图之显示 ...
- 利用python进行折线图，直方图和饼图的绘制
我用10个国家某年的GDP来绘图,数据如下: labels = ['USA', 'China', 'India', 'Japan', 'Germany', 'Russia', 'Brazil', ...
- JavaScript数据可视化编程学习（一）Flotr2，包含简单的，柱状图，折线图，饼图，散点图
一.基础柱状图 二.基础的折线图 三.基础的饼图 四.基础的散点图 一.基础柱状图 如果你还没有想好你的数据用什么类型的图表来展示你的数据,你应该首先考虑是否可以做成柱状图.柱状图可以表示数据的变化过 ...
- highcharts.js的时间轴折线图
工作中正好用到. 鼠标按住左键 左右移动可以试试 <!DOCTYPE> <html lang='en'> <head> <title>4-Highcha ...
- D3.js(v3)+react 制作 一个带坐标轴与比例尺的折线图
本章使用路径生成器来绘制一个折线图.以中国和日本的GDP数据为例: //数据 var dataList = [ { coountry : "china", gdp : [ [2 ...
- matplotlib折线图
绘制折线图:参考https://baijiahao.baidu.com/s?id=1608586625622704613 (3)近10年GDP变化的曲线图,及三次产业GDP变化的曲 ...
- C# 实时折线图，波形图
此Demo是采用VS自带的Chart图表控件,制作实时动态显示的折线图,和波形图. 涉及到知识如下: Chart 控件,功能强大,可以绘制柱状图,折线图,波形图,饼状图,大大简化了对图的开发与定制. ...
- Android开发学习之路-自定义控件（天气趋势折线图）
之前写了个天气APP,带4天预报和5天历史信息.所以想着要不要加一个折线图来显示一下天气变化趋势,难得有空,就写了一下,这里做些记录,脑袋不好使容易忘事. 先放一下效果: 控件内容比较简单,就是一个普 ...
- react-echarts之折线图的显示
react中想要实现折线图和饼图的功能,需要引入react-echarts包,然后再实现折线图的功能.我这里引用的版本是:0.1.1.其他的写法参echarts官网即可.下面详细讲解的是我在react ...
随机推荐
- [USACO2007NOVG] Sunscreen
题目描述 To avoid unsightly burns while tanning, each of the$ C (1 ≤ C ≤ 2500) $cows must cover her hide ...
- 8、switch语句
1.switch语句:"开关" switch是一个条件语句,它计算表达式并将其与可能匹配的列表进行比较,并根据匹配执行代码块.它可以被认为是一种惯用的方式来写多个if else子句 ...
- 华企盾DSC控制台无法登录常见处理方法
1.查看服务器服务是否正常运行 2.服务器电脑的防火墙关闭了 3.telnet服务器IP和端口(服务器端口和数据库端口)是否是通的 4.如果是外网需要再控制台安装目录改setting配置文件 5.my ...
- python tkinter使用(五)
python tkinter使用(五) 本篇文章讲述tkinter 中treeview的使用 Treeview是一个多列列表框,可以显示层次数据. #!/usr/bin/python3 # -*- c ...
- 在macOS中搭建.NET MAUI开发环境
@ 目录 准备 安装扩展 安装 .NET 安装工作负载 安装 Xcode 命令行工具 调试安卓应用 安装 JDK 安装 Android SDK 安装 Android 模拟器 安装模拟器 安装镜像 创建 ...
- 文件不落地上线sliver
接着二开sliver,给他添加一个生成powershell payload上线的功能,生成并复制到剪切板. 准备 首先,先开启监听,不多说直接mtls默认的就行,sliver可以生成配置文件来实现 ...
- grafana_mysql安装
https://dl.grafana.com/oss/release/grafana-5.4.0-1.x86_64.rpm #官网下载安装包 [root@zbx4_0 source]# rpm -iv ...
- Linux 中查看文件系统的块大小
有时可能需要查看 Unix 操作系统中有关于文件基本单元的块大小,以便对有的系统进行适当的优化(如 MySQL),本文将介绍几种在 Unix 上以及类 Unix 操作系统上可行的查看方式 检查文件系统 ...
- 华为云GaussDB圈层活动走进香港，以技术创新构筑金融政企数智发展基石
摘要:近日,华为云GaussDB圈层活动在中国·香港如期举办,活动聚集了22家香港金融政企客户和合作伙伴. 本文分享自华为云社区<华为云GaussDB圈层活动走进香港,赋能金融政企数字化转型&g ...
- CPU高速缓存与极性代码设计
摘要:CPU内置少量的高速缓存的重要性不言而喻,在体积.成本.效率等因素下产生了当今用到的计算机的存储结构. 介绍 cpu缓存的结构 缓存的存取与一致 代码设计的考量 最后 CPU频率太快,其处理速度 ...