首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在BokehJS中添加第二个y轴

可以通过以下步骤实现:

  1. 首先,导入必要的库和模块。在BokehJS中,可以使用import语句导入所需的库和模块,例如:import { figure, ColumnDataSource, Range1d, LinearAxis, MultiLine, Circle, HoverTool, BoxZoomTool, ResetTool, PanTool, WheelZoomTool, SaveTool } from "bokehjs"
  2. 创建一个绘图对象。使用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", })
  3. 创建数据源。使用ColumnDataSource类创建一个数据源对象,并将数据源与绘图对象关联,例如:const source = new ColumnDataSource({ data: { x: [1, 2, 3, 4, 5], y1: [10, 20, 30, 40, 50], y2: [50, 40, 30, 20, 10], }, })
  4. 添加第一个y轴。使用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")
  5. 添加第二个y轴。使用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")
  6. 绘制数据。使用绘图对象的绘图方法绘制数据,例如:plot.line({ field: "x" }, { field: "y1" }, { source: source, line_color: "blue", line_width: 2, line_dash: [6, 4], }) plot.circle({ field: "x" }, { field: "y2" }, { source: source, fill_color: "red", line_color: "red", size: 8, })
  7. 添加工具和交互。使用绘图对象的add_tools方法添加工具和交互功能,例如:plot.add_tools(new HoverTool({ tooltips: [ ("x", "@x"), ("y1", "@y1"), ("y2", "@y2"), ], }))
  8. 显示绘图。使用show函数显示绘图,例如:show(plot)

通过以上步骤,就可以在BokehJS中添加第二个y轴,并绘制相应的数据。请注意,以上代码仅为示例,具体的实现方式可能会根据实际需求和环境而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券