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 ...
随机推荐
- Lucene和索引
全文索引的原理: 是 扫描每个词 对每个词创建索引,指明这个词在文章出现的次数和位置 全文检索的流程:对 检索的对象(文章,文档,网页内容) 预先建立 文档域 和 索引域 ,在索引域会分词创建索引,然 ...
- Winform 控件库 MaterialSkin.2 使用教程（鸿蒙字体版）
️MaterialSkin.2 控件库在之前的文章中已经介绍过了,就不啰嗦了 - > Winform 好看控件库推荐:MaterialSkin.2 ️官方库里使用的是 Google 的 Robo ...
- Vue重用组件
1.是什么? 这里主要是简单入门使用一下,复杂高阶的用法笔者暂时还没了解到 Vue重用组件是指可以被多个Vue实例重复使用的组件.这些组件可以包含自定义的状态和事件处理程序,并且可以在整个应用程序中共 ...
- ClickHouse(18)ClickHouse集成ODBC表引擎详细解析
目录 创建表 用法示例 资料分享 参考文章 ODBC集成表引擎使得ClickHouse可以通过ODBC方式连接到外部数据库. 为了安全地实现 ODBC 连接,ClickHouse 使用了一个独立程序 ...
- 2023年国家基地“楚慧杯”网络安全实践能力竞赛初赛-Crypto+Misc WP
Misc ez_zip 题目 4096个压缩包套娃 我的解答: 写个脚本直接解压即可: import zipfile name = '附件路径\\题目附件.zip' for i in range(40 ...
- 华企盾DSC登录控制台提示查询数据库错误
解决方法:服务器防火墙已经关了,查看控制台日志,如出现下图2问题升级到最新版即可解决,否则需要找研发处理
- Pikachu漏洞靶场 ../../（目录遍历）
目录遍历 概述 在web功能设计中,很多时候我们会要将需要访问的文件定义成变量,从而让前端的功能便的更加灵活.当用户发起一个前端的请求时,便会将请求的这个文件的值(比如文件名称)传递到后台,后台再执行 ...
- Java 并发编程（三）锁与 AQS
本文 JDK 对应的版本为 JDK 13 由于传统的 synchronized 关键字提供的内置锁存在的一些缺点,自 JDK 1.5 开始提供了 Lock 接口来提供内置锁不具备的功能.显式锁的出现不 ...
- 动态规划问题（六）最长公共子序列（LCS）
问题描述 给你两个字符串,要求得到这两个字符串的最长公共子序列长度. 比如:对于输入的字符串 S1 "AGGTAB" 和 S2 "GXTXAYB",它们 ...
- Mybatis之TypeHandler使用教程
引言 MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以使用简单的 ...