几种使用Python绘制的HTML动态图表
发表更新Development / Python25 分钟读完 (大约3763个字)

几种使用Python绘制的HTML动态图表

图形类别

散点图

1
2
3
4
5
6
7
8
9
10
11
# import modules 
from bokeh.plotting import figure, output_file, show 
output_file("html/graph.html")
# create figure 
p = figure(plot_width = 400, plot_height = 400) 
# add a circle renderer with 
# size, color and alpha 
p.circle([1, 2, 3, 4, 5], [4, 7, 1, 6, 3],  
         size = 10, color = "navy", alpha = 0.5) 
# show the results 
show(p)

折线图

1
2
3
4
5
6
7
8
9
10
11
# import modules 
from bokeh.plotting import figure, output_file, show 
# output to notebook 
output_file('html/line.html') 
# create figure 
p = figure(plot_width = 400, plot_height = 400) 
# add a line renderer 
p.line([1, 2, 3, 4, 5], [3, 1, 2, 6, 5],  
        line_width = 2, color = "green") 
# show the results 
show(p)

柱状图

1
2
3
4
5
6
7
8
9
10
from bokeh.io import show, output_file
from bokeh.plotting import figure
output_file("html/bars.html")
fruits = ['Apples', 'Pears', 'Nectarines', 'Plums', 'Grapes', 'Strawberries']
counts = [5, 3, 4, 2, 4, 6]
p = figure(x_range=fruits, plot_height=250, title="Fruit Counts",tools="")
p.vbar(x=fruits, top=counts, width=0.9)
p.xgrid.grid_line_color = None
p.y_range.start = 0
show(p)

在一张图表中插入多组数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
from bokeh.plotting import figure, output_file, show

# prepare some data
x = [0.1, 0.5, 1.0, 1.5, 2.0, 2.5, 3.0]
y0 = [i**2 for i in x]
y1 = [10**i for i in x]
y2 = [10**(i**2) for i in x]

# output to static HTML file
output_file("log_lines.html")

# create a new plot
p = figure(
   tools="pan,box_zoom,reset,save",
   y_axis_type="log", y_range=[0.001, 10**11], title="log axis example",
   x_axis_label='sections', y_axis_label='particles'
)

# add some renderers
p.line(x, x, legend="y=x")
p.circle(x, x, legend="y=x", fill_color="white", size=8)
p.line(x, y0, legend="y=x^2", line_width=3)
p.line(x, y1, legend="y=10^x", line_color="red")
p.circle(x, y1, legend="y=10^x", fill_color="red", line_color="red", size=6)
p.line(x, y2, legend="y=10^x^2", line_color="orange", line_dash="4 4")

# show the results
show(p)

将图表插入到自己的页面

生成的html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <title>Bokeh Plot</title>
+        <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-1.3.4.min.js"></script>
+        <script type="text/javascript">
+            Bokeh.set_log_level("info");
+        </script>
  </head>
  <body>
+        <div class="bk-root" id="c2e1f62c-4bf8-4646-b45f-0941761cab1e" data-root-id="2631"></div>
+       <script type="application/json" id="3005">
+         // 一些代码
+        </script>
+        <script type="text/javascript">
+          (function() {
+            var fn = function() {
+              Bokeh.safely(function() {
+                .... // 一些代码
+              });
+            };
+            if (document.readyState != "loading") fn();
+            else document.addEventListener("DOMContentLoaded", fn);
+          })();
+        </script>
  </body>
</html>

先引入bokeh的CDN库，然后将上面的html源码中的body内容放置到你自己的页面内，就可以显示图表了。

另外：如果要在Hexo中引入图表的话，需要将上面提取出的页面压缩一下，不然真的容易出错。比如在下面的工具中压缩：

https://www.sojson.com/jshtml.html

几种使用Python绘制的HTML动态图表

https://www.borgor.cn/posts/65c8031f.html

作者

Cyrusky

发布于

2019-08-25

更新于

2024-11-18

许可协议

#

评论

分类

目录

最新文章

归档

标签

Design Pattern24
DevOps32
LeetCode1
Python3
写作4
开发55
数学17
机器学习9
深度学习9
×