『Plotly实战指南』--折线图绘制进阶篇

上一篇介绍了Plotly绘制折线图的基础知识和数据预处理的技巧，
本文将重点探究如何利用Plotly实现多线折线图的布局计划以及动态折线图的实现，
让我们一起掌握进阶的折线图绘制技巧。
1. 多折线图布局

在现实的数据分析场景中，常常必要同时展示多组数据，例如对比不同产物的销售趋势、不同地区的温度变化等。
这种多变量对比或时间序列对比的场景非常恰当使用多线折线图。
然而，如何合理安排多组数据在同一图表中的展示，避免折线重叠或混乱，是布局规划的关键。
1.1. 布局的要点

假设我们有一组数据，记录了不同城市的月匀称气温。
我们必要在同一张图表中展示这些城市的气温变化趋势，以便举行对比分析。
针对这个示例，布局图形的要点是：

• 利用子图（Subplots）或分层布局：如果数据组较多，可以使用子图将它们分层展示，避免图表过于拥挤。Plotly的make_subplots函数可以资助我们轻松创建子图布局。
  
• 合理安排图例位置：确保图例清晰易读，避免遮挡折线。
  
• 调整坐标轴范围：根据数据的最大值和最小值，合理设置坐标轴范围，使折线图更加美观。
  

1. import plotly.graph_objects as go
2. from plotly.subplots import make_subplots
4. # 示例数据
5. city1 = [20, 22, 25, 28, 30, 32, 35, 34, 30, 26, 22, 20]
6. city2 = [15, 18, 20, 22, 25, 28, 30, 29, 25, 22, 18, 15]
7. city3 = [10, 12, 15, 18, 20, 22, 25, 24, 20, 18, 15, 12]
8. months = [
9.     "1月",
10.     "2月",
11.     "3月",
12.     "4月",
13.     "5月",
14.     "6月",
15.     "7月",
16.     "8月",
17.     "9月",
18.     "10月",
19.     "11月",
20.     "12月",
21. ]
23. # 创建子图布局
24. fig = make_subplots(rows=1, cols=3, subplot_titles=("南京", "北京", "西安"))
26. # 添加折线图
27. fig.add_trace(go.Scatter(x=months, y=city1, name="南京"), row=1, col=1)
28. fig.add_trace(go.Scatter(x=months, y=city2, name="北京"), row=1, col=2)
29. fig.add_trace(go.Scatter(x=months, y=city3, name="西安"), row=1, col=3)
31. # 更新布局
32. fig.update_layout(height=400, width=900, title_text="每月平均气温比较")
33. fig.show()

复制代码

通过子图布局，我们可以清晰地展示不同城市的气温变化趋势，避免了折线之间的相互干扰。
1.2. 颜色与样式的选择

在多折线图中，除了使用子图布局的方式，也可以将所有的折线绘制在一个图中，这时，颜色和样式的计划对于提升图表的可读性就至关重要。
对于颜色的选择与搭配：

• 根据数据特点选择颜色：例如，对于温度数据，可以使用冷暖色调来区分不同的城市。
  
• 使用Plotly的颜色库或自定义颜色：Plotly提供了丰富的颜色库，也可以通过十六进制代码自定义颜色。
  

对于折线演示的计划：

• 线型的使用技巧：实线、虚线、点线等不同线型可以用于区分不同的数据组。
  
• 线宽与标记点的设置：适当增加线宽或添加标记点可以突出关键数据。
  

1. import plotly.graph_objects as go
3. # 示例数据
4. city1 = [20, 22, 25, 28, 30, 32, 35, 34, 30, 26, 22, 20]
5. city2 = [15, 18, 20, 22, 25, 28, 30, 29, 25, 22, 18, 15]
6. city3 = [10, 12, 15, 18, 20, 22, 25, 24, 20, 18, 15, 12]
7. months = [
8.     "1月",
9.     "2月",
10.     "3月",
11.     "4月",
12.     "5月",
13.     "6月",
14.     "7月",
15.     "8月",
16.     "9月",
17.     "10月",
18.     "11月",
19.     "12月",
20. ]
22. # 创建折线图
23. fig = go.Figure()
25. # 添加折线
26. fig.add_trace(
27.     go.Scatter(
28.         x=months,
29.         y=city1,
30.         mode="lines+markers",
31.         name="南京",
32.         line=dict(color="red", dash="solid", width=2),
33.         marker=dict(size=8, color="red"),
34.     )
35. )
36. fig.add_trace(
37.     go.Scatter(
38.         x=months,
39.         y=city2,
40.         mode="lines+markers",
41.         name="北京",
42.         line=dict(color="blue", dash="dash", width=2),
43.         marker=dict(size=8, color="blue"),
44.     )
45. )
46. fig.add_trace(
47.     go.Scatter(
48.         x=months,
49.         y=city3,
50.         mode="lines+markers",
51.         name="西安",
52.         line=dict(color="green", dash="dot", width=2),
53.         marker=dict(size=8, color="green"),
54.     )
55. )
57. # 更新布局
58. fig.update_layout(
59.     title="每月平均气温比较",
60.     xaxis_title="月份",
61.     yaxis_title="温度 (°C)",
62. )
63. fig.show()

复制代码

通过不同的颜色和线型，我们可以清晰地区分不同城市的气温变化趋势，提升图表的可读性。
2. 动态折线图

在数据分析中，动画效果可以资助我们更直观地展示数据随时间的变化趋势，例如展示股票代价的颠簸或温度的季候性变化。
动画效果不但能够吸引用户的注意力，还能资助用户更好地理解数据的变化过程。
动画可以清晰地展示数据的动态变化趋势，而不是仅仅展示静态的结果。
2.1. 动态折线图实现

Plotly提供了强大的动画功能，可以轻松实现动态效果。
可以通过设置帧率、过渡效果等参数来控制动画的播放效果。

1. import plotly.graph_objects as go
3. # 示例数据
4. x = [1, 2, 3, 4, 5]
5. y1 = [1, 4, 9, 16, 25]
6. y2 = [2, 5, 8, 11, 14]
7. frames = [
8.     go.Frame(
9.         data=[
10.             go.Scatter(
11.                 x=x[: i + 1], y=y1[: i + 1], mode="lines+markers", name="Line 1"
12.             ),
13.             go.Scatter(
14.                 x=x[: i + 1], y=y2[: i + 1], mode="lines+markers", name="Line 2"
15.             ),
16.         ],
17.         name=f"frame{i}",
18.     )
19.     for i in range(len(x))
20. ]
22. # 创建动画
23. fig = go.Figure(
24.     data=[
25.         go.Scatter(x=x[:1], y=y1[:1], mode="lines+markers", name="Line 1"),
26.         go.Scatter(x=x[:1], y=y2[:1], mode="lines+markers", name="Line 2"),
27.     ],
28.     frames=frames,
29. )
31. # 更新布局
32. fig.update_layout(
33.     title="动态折线图",
34.     xaxis_title="X",
35.     yaxis_title="Y",
36.     updatemenus=[
37.         dict(
38.             type="buttons",
39.             buttons=[
40.                 dict(
41.                     label="播放",
42.                     method="animate",
43.                     args=[
44.                         None,
45.                         {
46.                             "frame": {"duration": 500, "redraw": True},
47.                             "fromcurrent": True,
48.                             "transition": {"duration": 0},
49.                         },
50.                     ],
51.                 ),
52.                 dict(
53.                     label="暂停",
54.                     method="animate",
55.                     args=[
56.                         [None],
57.                         {
58.                             "frame": {"duration": 0, "redraw": False},
59.                             "mode": "immediate",
60.                             "transition": {"duration": 0},
61.                         },
62.                     ],
63.                 ),
64.             ],
65.         )
66.     ],
67. )
69. fig.show()

复制代码

通过动画效果，我们可以清晰地看到两条折线随时间的变化趋势，资助用户更好地理解数据的动态特征。
2.2. 交互式动态图

交互式图表可以让用户根据自己的需求选择展示的数据，增强了用户与数据之间的互动性。
例如，用户可以通过滑块调整时间范围，或者通过下拉菜单选择不同的变量举行对比，从而更加机动地探索数据。
Plotly提供了丰富的交互工具，可以实现动态更新图表数据的功能。
通过结合这些工具，可以为用户创建高度定制化的交互体验。

1. import plotly.graph_objects as go
2. import numpy as np
4. # 示例数据
5. x = np.linspace(0, 10, 100)
6. half = 50
7. y1 = np.sin(x[:half])
8. y2 = np.cos(x[half:])
10. fig = go.Figure()
11. # 创建交互式图表
12. for i in range(half):
13.     fig.add_trace(go.Scatter(x=x[:i], y=y1, mode="lines", name="sin(x)", visible=False))
15. for i in range(half, 100):
16.     fig.add_trace(
17.         go.Scatter(x=x[half:i], y=y2, mode="lines", name="cos(x)", visible=False)
18.     )
20. # 添加滑块
21. steps = []
22. for i in range(half):
23.     step = dict(
24.         method="update",
25.         args=[{"visible": [False] * len(x)}, {"title": f"x = {x[i]:.2f}"}],
26.         label=f"{x[i]:.2f}",
27.     )
28.     step["args"][0]["visible"][i] = True
29.     step["args"][0]["visible"][i + half] = True
30.     steps.append(step)
32. sliders = [
33.     dict(active=0, currentvalue={"prefix": "Time: "}, pad={"t": 50}, steps=steps)
34. ]
36. fig.update_layout(sliders=sliders)
37. fig.show()

复制代码

在这个示例中，用户可以通过滑块动态调整时间点，观察sin(x)和cos(x)在不同时间点的值。
这种交互式计划让用户能够更直观地探索数据的变化。
3. 图表优化技巧

在绘制复杂的动态折线图时，优化图表的性能和用户体验至关重要。
性能优化方面：

• 减少数据点数目：对于大规模数据集，可以通过采样或聚合减少数据点数目，避免图表卡顿。
  
• 使用WebGL渲染：对于复杂的动态图表，Plotly支持使用WebGL举行渲染，提升性能。
  

美观优化方面：

• 添加标题和注释：清晰的标题和注释可以资助用户更好地理解图表的内容。
  
• 美化图例：确保图例清晰易读，避免遮挡图表主体。
  
• 调整颜色和样式：根据数据特点选择合适的颜色和样式，提升图表的整体美观度。
  

交互优化方面：

• 添加提示框：当鼠标悬停在数据点上时，表现提示框，展示具体信息。
  
• 高亮表现：当用户选择某条折线时，可以通过高亮表现突出重点。
  
• 动态调整坐标轴范围：根据用户的选择动态调整坐标轴范围，确保图表始终清晰易读。
  

4. 总结

本文探究了如何利用Plotly实现多线折线图的布局计划和动态折线图的实现。
无论是多组数据的展示，还是动态效果的实现，Plotly都提供了强大的功能支持。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。