可以通过以下步骤实现:
import
语句导入所需的库和模块,例如:import { figure, ColumnDataSource, Range1d, LinearAxis, MultiLine, Circle, HoverTool, BoxZoomTool, ResetTool, PanTool, WheelZoomTool, SaveTool } from "bokehjs"figure
函数创建一个绘图对象,并设置绘图的基本属性,例如:const plot = figure({
width: 800,
height: 400,
x_range: new Range1d(0, 10),
y_range: new Range1d(0, 100),
tools: [BoxZoomTool, ResetTool, PanTool, WheelZoomTool, SaveTool],
toolbar_location: "above",
})ColumnDataSource
类创建一个数据源对象,并将数据源与绘图对象关联,例如:const source = new ColumnDataSource({
data: {
x: [1, 2, 3, 4, 5],
y1: [10, 20, 30, 40, 50],
y2: [50, 40, 30, 20, 10],
},
})plot.add_layout
方法添加第一个y轴,例如:plot.add_layout(new LinearAxis({
axis_label: "y1",
axis_label_text_font_size: "12pt",
axis_label_text_font_style: "bold",
axis_label_text_color: "blue",
major_label_text_font_size: "10pt",
major_label_text_color: "blue",
ticker: new BasicTicker(),
formatter: new NumeralTickFormatter({ format: "0,0" }),
axis_line_color: "blue",
axis_line_width: 2,
axis_line_dash: [6, 4],
major_tick_line_color: "blue",
major_tick_line_width: 2,
major_tick_line_dash: [6, 4],
minor_tick_line_color: "blue",
minor_tick_line_width: 1,
minor_tick_line_dash: [6, 4],
}), "left")plot.add_layout
方法添加第二个y轴,例如:plot.add_layout(new LinearAxis({
axis_label: "y2",
axis_label_text_font_size: "12pt",
axis_label_text_font_style: "bold",
axis_label_text_color: "red",
major_label_text_font_size: "10pt",
major_label_text_color: "red",
ticker: new BasicTicker(),
formatter: new NumeralTickFormatter({ format: "0,0" }),
axis_line_color: "red",
axis_line_width: 2,
axis_line_dash: [6, 4],
major_tick_line_color: "red",
major_tick_line_width: 2,
major_tick_line_dash: [6, 4],
minor_tick_line_color: "red",
minor_tick_line_width: 1,
minor_tick_line_dash: [6, 4],
}), "right")add_tools
方法添加工具和交互功能,例如:plot.add_tools(new HoverTool({
tooltips: [
("x", "@x"),
("y1", "@y1"),
("y2", "@y2"),
],
}))show
函数显示绘图,例如:show(plot)通过以上步骤,就可以在BokehJS中添加第二个y轴,并绘制相应的数据。请注意,以上代码仅为示例,具体的实现方式可能会根据实际需求和环境而有所不同。
云+社区技术沙龙[第27期]
云+社区技术沙龙[第19期]
北极星训练营
taic
taic
北极星训练营
Elastic 实战工作坊
Elastic 实战工作坊
腾讯云GAME-TECH沙龙
云+社区技术沙龙[第22期]
云+社区技术沙龙 [第30期]
领取专属 10元无门槛券
手把手带您无忧上云