Question

我想创建一个独立的文档，类似于服务器应用程序示例“ Crossfilter”：选择不同的列为圆形着色并更新色条。

我用下面的代码定义一个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();

结果，当选择该列时，圆圈变成白色，黑色线条，颜色条的刻度正确更改，但调色板不变。

您能帮我在回调中设置适当的属性吗？预先谢谢你。

原始状态，通过Python代码设置的颜色映射器

选择“ d”列

我创建了一个“最小工作示例”以显示我能走多远。带有模板的完整项目可以在这里找到：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文件的标题部分：

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

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

1 个答案: