文章目录
Python绘图库matplotlib、seaborn、plotly与前端Antv、Echarts、D3.js简介及绘制折线图
D3.js
简介：
免费的 JavaScript 库，可以将任意数据连接到 HTML 的文档对象模型（DOM），然后将数据驱动的转换应用于文档，通过 DOM 编程 API 可以将文档作为对象访问。支持用于交互和动画的大型数据集和动态行为，开发时可以通过浏览器的内置元素检查器进行调试。
折线图实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="test-svg">
</div>
</body>
<script src="https://d3js.org/d3.v5.js"></script>
<script>
window.onload = function() {
// 数据
var data = [{
date: new Date(2022, 5, 23),
value: 23
}, {
date: new Date(2022, 5, 24),
value: 72
},{
date: new Date(2022, 5, 25),
value: 72
}, {
date: new Date(2022, 5, 26),
value: 38
}, {
date: new Date(2022, 5, 27),
value: 58
}, {
date: new Date(2022, 5, 28),
value: 10
}, {
date: new Date(2022, 5, 29),
value: 85
}];
var width = 800,
height = 400,
padding = {
top: 40,
right: 40,
bottom: 40,
left: 40
};
var colors = d3.schemeSet2;
var svg = d3.select("#test-svg")
.append('svg')
.attr('width', width + 'px')
.attr('height', height + 'px');
// x轴:时间轴
var xScale = d3.scaleTime()
.domain(d3.extent(data, function(d) {
return d.date;
}))
.range([padding.left, width - padding.right]);
var xAxis = d3.axisBottom()
.scale(xScale)
.tickSize(10);
svg.append('g')
.call(xAxis)
.attr("transform", "translate(0," + (height - padding.bottom) + ")")
.selectAll("text")
.attr("font-size", "10px")
.attr("dx", "50px");
// y轴
var yScale = d3.scaleLinear()
.domain([0, d3.max(data, function(d) {
return d.value;
})])
.range([height - padding.bottom, padding.top]);
var yAxis = d3.axisLeft()
.scale(yScale)
.ticks(10);
svg.append('g')
.call(yAxis)
.attr("transform", "translate(" + padding.left + ",0)");
var line = d3.line()
.x(function(d) {
return xScale(d.date);
})
.y(function(d) {
return yScale(d.value);
});
// 生成折线
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", line);
}
</script>
</html>
Antv
简介：
是蚂蚁集团研发的一个可视化控件解决方案，包括了可视化图形语法、可视化引擎、图分析工具和地理空间数据的可视化框架等。从它的官网可以了解到现在阿里系的产品（支付宝、淘宝等）里的可视化都基于 AntV 开发。
折线图实现：
<!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>
var data = [{
year: '2022-05-23',
value: 30
}, {
year: '2022-05-24',
value: 20
}, {
year: '2022-05-25',
value: 10
}, {
year: '2022-05-26',
value: 5
}, {
year: '2022-05-27',
value: 15
}, {
year: '2022-05-28',
value: 17
}, {
year: '2022-05-29',
value: 35
}];
var chart = new G2.Chart({
container: 'mountNode',
forceFit: true,
height: window.innerHeight
});
chart.source(data);
chart.scale('value', {
min: 0
});
chart.scale('year', {
range: [0, 1]
});
chart.tooltip({
crosshairs: {
type: 'line'
}
});
chart.line().position('year*value');
chart.point().position('year*value').size(4).shape('circle').style({
stroke: '#fff',
lineWidth: 1
});
chart.render();
</script>
</body>
</html>
Echarts
简介：
基于 Canvas 的纯 Javascript 的图表库，提供直观、生动、可交互、可个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、 K 线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、 treemap、 旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。并且有深度的交互式数据探索，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。与 D3.js 相比，ECharts 由百度团队研发，中文文档比较清晰，相对来说上手难度更低一点。
折线图实现
<!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="instance_work" class="row">
<div style="border: 1px;">
<div style="width: 100%;height: 30px;background-color: #D3D3D3;"><span
class="panel-title graph-title">
测试折现图</span></div>
<div id="main" style="width: 100%;height: 500px;"></div>
</div>
</div>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [10, 20, 30, 10, 20, 6, 10],
type: 'line'
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</script>
</body>
</html>
Plotly
简介：
用于创建图表和基于浏览器的开源 Python 图形库。可称为高级图表库，因为它是内置于 D3.js 库的顶部。可以使用该工具通过上载 CSV 文件或连接到 SQL 数据库来创建 D3.js 图表和地图。导出图片的质量较高，图形界面完全交互式。Plotly 可以提供比较少见的图表，比如等高线图、烛台图（K 线图）和 3D 图表，而大多数工具都没有这些图表。此外，Plotly 的团队还维护着增长飞快的 R、Python 以及 JavaScript 的开源可视化库。
折线图实现
import plotly.graph_objects as go
animals = ['2022-05-23', '2022-05-24', '2022-05-25','2022-05-26','2022-05-27','2022-05-28','2022-05-29']
fig = go.Figure(data=[
go.Scatter(name='plotly', x=animals, y=[20, 14, 23,10,15,20,13]),
])
fig.show()
matplotlib
简介：
Matplotlib是一个用于在Python中制作数组的2D绘图的库。尽管它起源于模拟MATLAB® [1]图形命令，但它独立于MATLAB，可以以Pythonic，面向对象的方式使用。尽管Matplotlib主要是用纯Python编写的，但它大量使用NumPy和其他扩展代码，即使对于大型数组也能提供良好的性能。
折线图实现
import matplotlib.pyplot as plt
#折线图
x = ['2022-05-23', '2022-05-24', '2022-05-25','2022-05-26','2022-05-27','2022-05-28','2022-05-29']#点的横坐标
k1 = [20, 14, 23,10,15,20,13]#线1的纵坐标
plt.plot(x,k1,'s-',color = 'r',label="ATT-RLSTM")#s-:方形
plt.xlabel("region length")#横坐标名字
plt.ylabel("accuracy")#纵坐标名字
plt.legend(loc = "best")#图例
plt.show()
seaborn
简介：
它简化了复杂数据集的表示，可以轻松构建复杂的可视化，简洁的控制matplotlib图形样式与几个内置主题，拥有更多的、更现代化的风格样式和艺术效果，新增了更多的基于统计的、更加简单方便的高级函数，能与 Pandas 的 DataFrame 无缝结合。
折线图实现
import seaborn as sns
import pandas as pd
import matplotlib.pyplot as plt
# 设置
pd.options.display.notebook_repr_html=False # 表格显示
plt.rcParams['figure.dpi'] = 75 # 图形分辨率
sns.set_theme(style='darkgrid') # 图形主题
s=pd.Series([3,15,9,12,4,10,15],name='count')
sns.lineplot(data=s)
plt.show()
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
