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. Java中的try-catch

    try里面放入可以尝试的操作,而catch则是接受try里面的异常,从而进行的操作,其目的是为了不让程序因为异常而中断,具体的流程是 抛出异常是可以自己设置,这里是自己设置的异常类fg,catch括号 ...

  2. 通过match看rust

    最常见的逻辑控制流比如if-else,switch,while等常用编程语言都支持,但恰巧rust语法中没有switch,取而代之的是更加强大适用的match匹配,我们就来看看rust的match有何 ...

  3. Java五种设计模式实现奶茶订单生成系统小DEMO

    前言 这是大学时候上设计模式这门课写的程序,当时课程任务是要求结合五个设计模式写一个系统,最近偶然翻到,把系统分享一下. 成品预览 主界面 ​ 功能介绍 订单管理系统,实现了对订单的增删改查.且实现了 ...

  4. FOJ有奖月赛-2015年11月 Problem B 函数求解

    Problem B 函数求解 Accept: 171    Submit: 540Time Limit: 1000 mSec    Memory Limit : 32768 KB  Problem D ...

  5. 【C++】关于全局变量和局部变量问题

    1 #include <iostream> 2 using namespace std; 3 4 void func(void); 5 6 static int count = 10; 7 ...

  6. 尚医通项目学习若依+springboot+springsecurity+redis+fastjson

    尚医通 [基于若依快速开发医疗系统] 主要内容 学习目标 项目简介 一款医疗平台. 系统包含:系统管理.药品进销存管理.看病就诊.收费管理.检查管理.数据统计等. 涉及技术 SpringBoot.My ...

  7. 【程序员的福音】一款C#开源的GitHub加速神器

    前言 作为一个程序员你是否会经常会遇到GitHub无法访问(如下无法访问图片),或者是访问和下载源码时十分缓慢就像乌龟爬行一般.之前有尝试过手动修改host文件来解决网站的访问问题,以及更换网络但还是 ...

  8. 微信小程序本地测试报错 IllegalArgumentException

    在微信小程序本地测试时出现 IllegalArgumentException 错误,解决方法将https换成http Note: further occurrences of HTTP request ...

  9. 认识BeanFactoryPostProcessor和BeanDefinitionRegistryPostProcessor

    本文分享自华为云社区<Spring高手之路13--BeanFactoryPostProcessor与BeanDefinitionRegistryPos>,作者: 砖业洋__ . 在Spri ...

  10. 谁说AI看不懂视频？

    摘要:人工智能在视觉领域发展趋于成熟,基于人工智能的视频内容分析能从根本上解决传统内容分析方法性能低下的问题,视频分析开启2.0智能时代. 视频数据量激增,数据处理和内容运营成本居高不下 云计算.大数 ...