2

我有以下 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);
}

当我点击 Pie_Report 按钮时附加此代码的输出

4

1 回答 1

1

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

plt.show(p0, '#bokeh_ch1')

更新小提琴

您还可以传入一个HTML element或一个jQuery对象作为第二个参数，如bokeh-api 源代码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
};
于 2018-02-09T19:53:15.290 回答