如何在 div 元素中嵌入散景 js 输出图形？

Question

我有以下 HTML 和 JS 代码（粘贴在下面）来创建 Bokeh-JS 饼图。但它没有给出预期的结果。散景图未嵌入 HTML 代码的 div 元素中。

我是不是漏掉了什么？我还附上了代码的输出。

HTML代码：

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.13.min.css"> 
    <link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.13.min.css"> 
    <link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-tables-0.12.13.min.css">
    <style>
    .floating-box {
        display: inline-block;
        width: 150px;
        height: 75px;
        margin: 10px;
        border: 3px solid #73AD21;  
    }

    </style>

    <title></title>

</head>
<body>

    <div id="container">
    <div id="button">
                <button id="pie_report" type='button' value="Pie Report"
                    name="Pie Report" class="button button1" onClick="execute()">Pie_Report</button>
    </div>

    <div id="bokeh_ch1" class="floating-box"> 
    </div>              

    <div id="bokeh_ch2" class="floating-box"> 
    </div>      
    </div>              

</body>
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.13.min.js"></script>         
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.13.min.js"></script> 
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-tables-0.12.13.min.js"></script> 
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-api-0.12.13.min.js"></script>
<script type="text/javascript" src="my_js.js"></script>

</html>

my_js.js 文件代码：

function execute(){ 

    var plt =  Bokeh.Plotting;

    var pie_data = {
        labels: ['Work', 'Eat', 'Commute', 'Sport', 'Watch TV', 'Sleep'],
        values: [8, 2, 2, 4, 0, 8],
    };

    var inc_sr={labels:['incident','Sr'],
        values: [53,65]

    };
     var p0 = Bokeh.Charts.pie(inc_sr,{palette:['#FF8C00'   ,'#A0522D'],
        inner_radius: 0.0,width:20,height:20,
        start_angle: Math.PI / 2,
        end_angle: 5 * Math.PI / 2
    });
    var p1 = Bokeh.Charts.pie(pie_data);


        document.getElementById('bokeh_ch1').innerHTML=plt.show(p0); 
    document.getElementById('bokeh_ch2').innerHTML=plt.show(p1);
}

Attaching output of this code when I hit Pie_Report button

Answer 1

函数 Bokeh.Plotting.show 接受两个参数，第一个是（图表？）obj，第二个是 target。使用一个参数调用 plt.show(p0) 只是将图表附加到正文并将返回的对象分配给 div 的 innerHTML。相反，给它 Id 要插入图表的元素：

plt.show(p0, '#bokeh_ch1')

Updated Fiddle

您还可以传入 HTML element 或 jQuery 对象作为第二个参数，如 bokeh-api source code 中的 show 函数所示（第 6494 行）：（我删除了代码并添加了我的评论）

exports.show = function (obj, target) {
    // variable declaration
    if (target == null) { // no target specified, set element to body
        element = document.body;
    } else if (types_1.isString(target)) { // assume selector passed in
        element = document.querySelector(target); // find element in page
        if (element == null) { // element not found in page
            throw new Error('\'' + target + '\' selector didn\'t match any elements');
        }
    } else if (target instanceof HTMLElement) { // if an HTML element is passed,
        element = target; // use that element
    } else if (typeof $ !== 'undefined' && $ !== null && target instanceof $) {
        element = target[0]; // target is a jQuery object, get the HTML element
    } else {
        throw new Error('target should be HTMLElement, string selector, $ or null');
    }
    // append element
};

如何在 div 元素中嵌入散景 js 输出图形？

How to embed bokeh js output figure inside a div element?

javascript

bokeh

bokehjs