Как вставить выходной рисунок bokeh js в элемент div?

У меня есть следующий код HTML и JS (вставленный ниже) для создания круговой диаграммы Bokeh-JS. Но это не дает ожидаемого результата. Графики Bokeh не внедряются в элементы div кода HTML.

Я что-то здесь упускаю? Также я приложил вывод кода.

HTML код:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.12.13.min.css"> 
    <link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.13.min.css"> 
    <link rel="stylesheet" href="http://cdn.pydata.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.pydata.org/bokeh/release/bokeh-0.12.13.min.js"></script>            
<script src="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.13.min.js"></script> 
<script src="http://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.13.min.js"></script> 
<script src="http://cdn.pydata.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

Источник

1 ответ

Решение

Функция Bokeh.Plotting.show принимает два аргумента, первый из которых (диаграмма?) obj а второе существо target, призвание plt.show(p0) с одним аргументом просто добавляет диаграмму к телу и присваивает возвращаемый объект innerHTML див. Вместо этого, дайте ему Id элемента, в который вы хотите вставить диаграмму:

plt.show(p0, '#bokeh_ch1')

Обновленная скрипка

Вы также можете пройти в HTML element или jQuery объект в качестве второго аргумента, как видно из show функция из исходного кода bokeh-api (строка 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
};
Источник
Другие вопросы по тегам