在独立的散景图中通过回调 JS 更改 ColorMapper

Question

我想创建一个独立的文档，类似于服务器应用示例 'Crossfilter'： select 不同的列为圆圈着色并更新颜色栏。

我使用下面的代码定义了一个 CustomJS，我在其中创建了一个具有计算出的低值和高值的新 LinearColorMapper。（出于调试目的，我有意添加了与通过 Python 代码设置的调色板不同的调色板）。

var low = Math.min.apply(Math,source.data[cb_obj.value]);
var high = Math.max.apply(Math,source.data[cb_obj.value]);
var color_mapper = new Bokeh.LinearColorMapper({palette:'Viridis5', low:low, high:high});
cir.glyph.fill_color = {field: cb_obj.value, transform: color_mapper};
cir.glyph.line_color = {field: cb_obj.value, transform: color_mapper};
color_bar.color_mapper = color_mapper;
source.change.emit();

因此，当 select 编辑该列时，圆圈变白，线条变黑，颜色条的刻度正确变化，但调色板没有变化。

你能帮我在回调中设置正确的属性吗？提前谢谢你。

原始状态，颜色映射器设置自 Python 代码

在 select 列 'd'

之后

我创建了一个 "minimal working example" 来显示我走了多远。可以在此处找到带有模板的完整项目：https://github.com/pintergreg/bokehjscolormapperexample

Answer 1

您似乎无法在 BokehJS 中引用这样的调色板。只需将 Viridis5 变量传递给 JS 回调即可（在 Bokeh v1.0.4 上测试）：

import pandas as pd
from bokeh.models import ColumnDataSource, ColorBar, Select, CustomJS
from bokeh.plotting import figure, show
from bokeh.layouts import gridplot
from bokeh.palettes import Spectral5, Viridis5
from bokeh.transform import linear_cmap
from bokeh.embed import components
from jinja2 import Environment, FileSystemLoader

df = pd.DataFrame({"a": [2, 6, 5, 3, 7, 8, 1, 9, 2, 4],
                   "b": [3, 5, 7, 1, 0, 6, 5, 4, 2, 9],
                   "c": [11, 12, 13, 14, 11, 13, 15, 14, 15, 12],
                   "d": [21, 23, 24, 25, 21, 22, 23, 24, 25, 22]})
source = ColumnDataSource(df)

mapper = linear_cmap(field_name = "c", palette = Spectral5,
                     low = min(df["c"]), high = max(df["c"]))

fig = figure(plot_width = 400, plot_height = 400)

cir = fig.circle(x = "a", y = "b", size = 12,
                 source = source, line_color = mapper, color = mapper)
color_bar = ColorBar(color_mapper = mapper["transform"], width = 8,
                     location = (0, 0))
fig.add_layout(color_bar, "right")

codec = """
            var low = Math.min.apply(Math,source.data[cb_obj.value]);
            var high = Math.max.apply(Math,source.data[cb_obj.value]);
            var color_mapper = new Bokeh.LinearColorMapper({palette:viridis5, low:low, high:high});
            cir.glyph.fill_color = {field: cb_obj.value, transform: color_mapper};
            cir.glyph.line_color = {field: cb_obj.value, transform: color_mapper};
            color_bar.color_mapper.low = low;
            color_bar.color_mapper.high = high;
            color_bar.color_mapper.palette = viridis5;
            source.change.emit();
        """
cb_cselect_c = CustomJS(args = dict(cir = cir, source = source, color_bar = color_bar, viridis5 = Viridis5),
                        code = codec)

c_select = Select(title = "Select variable for color: ", value = "None",
                  options = ["c", "d"], callback = cb_cselect_c)

layout = gridplot([[fig], [c_select]])
show(layout)

# env = Environment(loader=FileSystemLoader("."))
# template = env.get_template("template.html")
#
# script, div = components(layout)
#
# with open("output.html", "w") as f:
#     print(template.render(script=script, div=div), file=f)

您还需要将此行手动添加到生成的 HTML 文件的 header 部分：

<script type="text/javascript" src="http://cdn.bokeh.org/bokeh/release/bokeh-api-1.0.4.min.js"></script>

在独立的散景图中通过回调 JS 更改 ColorMapper

Change ColorMapper via callback JS in standalone Bokeh plot

bokeh

bokehjs