即使在将 X 和 Y 值转换为 NumPy arrays 并使用 DateTime 轴之后，散景也不显示 plot

Question

散景没有显示我的 plot。 我将给出整个代码，但用 Python 注释标记我怀疑的区域。

import pandas
import numpy

from bokeh.layouts import column
from bokeh.models import ColumnDataSource, RangeTool
from bokeh.plotting import figure, output_file, show

from selenium import webdriver
from selenium.webdriver.edge.service import Service
from webdriver_manager.microsoft import EdgeChromiumDriverManager
from selenium.webdriver.common.by import By

driver = webdriver.Edge(service=Service(EdgeChromiumDriverManager().install()))
driver.get("https://www.statmuse.com/money/ask/bitcoin+value+graph+2020-2021+monthly")
driver.implicitly_wait(10)
html = driver.find_element(By.CLASS_NAME, "kaojVddNm5wDHXzg63Rp").get_attribute("outerHTML")
driver.close()

df = pandas.DataFrame(pandas.read_html(html)[0][::-1])

df["DATE"] = pandas.to_datetime(df["DATE"])
dates = df["DATE"].to_numpy(dtype="datetime64[M]")

source = ColumnDataSource(data=dict(date=dates, close=list(df["CLOSE"])))

# -------------------------------------------------------------------------------------
# ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ Suspicious area where the error might be ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

p = figure(plot_height=300, plot_width=1200, tools="", toolbar_location=None,
           x_axis_type="datetime", x_axis_location="above",
           background_fill_color="#efefef", x_range=(dates[9], dates[18]))

p.line(x="date", y="close", source=source)

select = figure(title="Drag the middle and edges of the selection box to change the range above",
                plot_height=130, plot_width=1200, y_range=p.y_range,
                x_axis_type="datetime", y_axis_type=None,
                tools="", toolbar_location=None, background_fill_color="#efefef")

# ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ Suspicious area where the error might be ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
# -------------------------------------------------------------------------------------

range_tool = RangeTool(x_range=p.x_range)

range_tool.overlay.fill_color = "navy"
range_tool.overlay.fill_alpha = 0.2

select.line(x="date", y="close", source=source)
select.ygrid.line_color = None
select.add_tools(range_tool)
select.toolbar.active_multi = range_tool

output_file("btc_price_interactive.html", title="Bitcoin Price Chart")
show(column(p, select))

运行代码时，我只看到两个空白的灰色图和我在“可疑区域”中指定的标题。

我得到的结果图的图片

然后我启动了 Edge 控制台，发现有几个错误，准确地说是 5 个。 其中 4 个是警告，指出 [bokeh] 无法设置初始范围，最后一个是错误，指出 Uncaught (in promise) Error: invalid bbox {x0: NaN, y0: 27, x1: NaN, y1: 125}

我发现了这个StackOverflow 答案，它为我的错误提供了两种解决方案。 如您所见，我已经预先实现了第二个解决方案——我已经将日期时间值转换为日期时间 NumPy arrays 并且即使值是字符串，绘图的轴也是日期时间轴，这意味着它应该按照第二种解决方案，但它不起作用。

如果您能帮助我改正我的错误，我将不胜感激。 （这可能是一个明显的错误，比如我无法找到的拼写错误）

Answer 1

正如我在评论中提到的，您的数据有问题。 我复制了你的代码并创建了一些虚拟数据，它工作正常。

最小的例子

import pandas as pd
import numpy as np

from bokeh.layouts import column
from bokeh.models import ColumnDataSource, RangeTool
from bokeh.plotting import figure, output_notebook, show
output_notebook()

#dummy data
df = pd.DataFrame({'close':np.random.randint(100,200,20)}, index=pd.date_range('2020-01-01', periods=20, freq='M'))
df.index.name = 'date'

source = ColumnDataSource(df)

# figures
p = figure(plot_height=300, plot_width=1200, tools="", toolbar_location=None,
           x_axis_type="datetime", x_axis_location="above",
           background_fill_color="#efefef", x_range=(df.index[9], df.index[18]))

p.line(x="date", y="close", source=source)

select = figure(title="Drag the middle and edges of the selection box to change the range above",
                plot_height=130, plot_width=1200, y_range=p.y_range,
                x_axis_type="datetime", y_axis_type=None,
                tools="", toolbar_location=None, background_fill_color="#efefef")
range_tool = RangeTool(x_range=p.x_range)

range_tool.overlay.fill_color = "navy"
range_tool.overlay.fill_alpha = 0.2

select.line(x="date", y="close", source=source)
select.ygrid.line_color = None
select.add_tools(range_tool)
select.toolbar.active_multi = range_tool

show(column(p, select))

Output

进一步阅读

1. bokeh 文档有一个使用range 工具和一些sampledata的示例。
2. 看起来您正在尝试 plot 烛台 plot。 Bokeh docs 也有一个 例子。
3. 在 SO 上， 此处存在烛台示例的修改，可以使用范围工具轻松修改。