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

Question

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

1

У меня есть код 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

santosh 09 фев. 2018, в 20:42

Источник

Теги:

javascript

bokeh

1 ответ

Ещё вопросы

Sven Writes Code · Accepted Answer · 2018-02-09T18-31-00.000Z

Функция Bokeh.Plotting.show принимает два аргумента, первая из которых является (chart?) obj а вторая - target. Вызов plt.show(p0) с одним аргументом просто добавляет диаграмму в тело и присваивает возвращенный объект innerHTML div. Вместо этого дайте ему 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
};

Подскажите, пожалуйста, как вы узнали, что plt.show () примет два аргумента? Любая ссылка на документацию, пожалуйста?
Нет, извините, я не смог найти никакой документации. Я установил plt.show останова в строке, вызывающей plt.show и ввел в консоль plt.show которая возвращает функцию params / body: ƒ (t,e){var r,s,l,u,c,h,p;if(h=a.isArray(t),l=new i,h) ... и я увидел, что потребовалось t , которое, как я предполагал, было диаграммой, и e которое я предположил, было element , поэтому я начал с того, что просто дал ему bokeh_ch1 который не работал, затем понял, что это, вероятно, selector и дал ему #bokeh_ch1 который работал.
Я опубликовал исходный код и мою попытку объяснить. Вы можете использовать эти ссылки скрипта javascript и изменить расширение .min.js на просто .js для неминифицированной версии, с которой легче отлаживать.