如何将Bokeh JS输出图表嵌入div元素？嵌入失败求助

Hey there! Let's walk through the common pitfalls that might be keeping your Bokeh pie chart from rendering in the target div. Here are the key checks and fixes you should try:

1. Ensure Bokeh Resources Are Loaded Correctly #

Bokeh relies on its own CSS and JS files to render charts—you must load these before your custom JS code. Use consistent version numbers across all Bokeh assets to avoid compatibility issues:

<!-- Place these in your <head> section -->
<link href="https://cdn.bokeh.org/bokeh/release/bokeh-3.3.2.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-3.3.2.min.js"></script>
<!-- Add these if you need widgets/advanced interactions -->
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.3.2.min.js"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.3.2.min.js"></script>

2. Verify Target Div ID Match #

Double-check that the ID in your HTML div exactly matches the ID you reference in your Bokeh embed code—IDs are case-sensitive!

• Example HTML: <div id="pie-chart-container"></div>
• Example JS: Bokeh.embed.embed_item(pieChart, "pie-chart-container")

3. Run JS After the DOM Is Loaded #

If your custom JS runs before the target div exists in the DOM, Bokeh can't find it. Fix this in one of two ways:

• Move your <script> tag to the end of the <body> section, right after your target div.
• Wrap your Bokeh code in a DOM load listener:

  document.addEventListener('DOMContentLoaded', function() {
      // Your pie chart creation and embed code goes here
  });
  

4. Use the Correct Embed Method #

If you're trying to embed into an existing div, avoid Bokeh.plotting.show() (it creates a new div by default). Instead, use Bokeh.embed.embed_item() to target your specific container. Here's a quick valid pie chart example for reference:

const data = { values: [25, 30, 45], labels: ['Red', 'Blue', 'Green'] };
const source = new Bokeh.ColumnDataSource({
    data: {
        values: data.values,
        labels: data.labels,
        start: Bokeh.LinAlg.linspace(0, 2*Math.PI, data.values.length+1).slice(0, -1),
        end: Bokeh.LinAlg.linspace(0, 2*Math.PI, data.values.length+1).slice(1),
        color: ['#ff0000', '#0000ff', '#00ff00']
    }
});

const fig = Bokeh.Plotting.figure({ 
    title: 'Sample Pie Chart', 
    width: 400, 
    height: 400, 
    toolbar_location: null 
});

fig.wedge({
    x: 0, y: 0, radius: 1,
    start_angle: { field: 'start' },
    end_angle: { field: 'end' },
    fill_color: { field: 'color' },
    line_color: 'white',
    source: source
});

// Embed into your target div
Bokeh.embed.embed_item(fig, "pie-chart-container");

5. Check Browser Console for Errors #

Open your browser's developer tools (F12 → Console tab) to spot issues like:

• "Bokeh is not defined": Means Bokeh JS failed to load.
• "Cannot find element with ID...": Means your div ID is misspelled or missing.
• Syntax errors: Fix typos, missing brackets, or invalid variable names in your JS.

6. Rule Out Code Conflicts #

Check if other scripts on your page (like jQuery or third-party libraries) are conflicting with Bokeh—for example, overwriting variables or modifying DOM elements that Bokeh relies on. Try isolating your pie chart code in a clean HTML file to test this.

内容的提问来源于stack exchange，提问作者santosh