Question

使用Bokeh 0.12.7并通过AjaxDataSource更新绘图。这很有效。

现在我想重复使用传递给绘图的数据，避免再次从服务器中再次读取它们。

我想访问从另一个JS组件（即计量器）传递给Bokeh javascript的JSON数据文件。

在示例中，仪表随机更改，但我想将其设置为绘图中的最后一个值。唉，我对Javascript的了解是空的，这根本没有帮助...

这可能吗？

这是我正在处理的精简代码。

import numpy as np
from math import sin
from random import random

from flask import Flask, jsonify, render_template_string

from bokeh.plotting import figure
from bokeh.embed import components
from bokeh.models.sources import AjaxDataSource

html_template = """
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <link href="http://cdn.pydata.org/bokeh/release/bokeh-0.12.7.min.css" rel="stylesheet" type="text/css">        
        <script src="http://cdn.pydata.org/bokeh/release/bokeh-0.12.7.min.js"></script>
    </head>

    <body>

        <script>

        google.charts.load('current', {'packages':['gauge']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {

            var data = google.visualization.arrayToDataTable([
                ['Label', 'Value'],
                ['value1', 0],
            ]);

            var options = {
                width: 200, height: 200,
                minorTicks: 5
            };

            var chart = new google.visualization.Gauge(document.getElementById('gauge_div'));

            chart.draw(data, options);

            setInterval(
                function() {

<!-- ***** Change the setValue HERE! ***** -->

                    data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
                    chart.draw(data, options);
                },
                100);
        }
        </script>

        <div id="gauge_div"></div>

        {{ plot_script | safe }}        
        {{ plot_div.plot_1 | safe }}

     </body>
</html>
"""

x = list(np.arange(0, 10, 0.1))
y = [sin(xx) for xx in x]

source = AjaxDataSource(data=dict(x=x, y=y),
                        data_url='http://localhost:5050/data',
                        polling_interval=100)

p = figure()
p.line('x', 'y', source=source, color="green")

p.toolbar.logo = None
p.toolbar_location = None

p.x_range.follow = "end"
p.x_range.follow_interval = 200

app = Flask(__name__)


@app.route("/")
def main_graph():
    script, div = components({'plot_1': p})

    html = render_template_string(html_template, plot_script=script, plot_div=div)
    return html


@app.route('/data', methods=['GET', 'OPTIONS', 'POST'])
def hello_world():
    global x, y
    x = x[1:]
    x.append(x[-1]+0.1)

    y = y[1:]
    y.append(sin(x[-1])+random()*.1)

    return jsonify(x=x[-100:], y=y[-100:])


if __name__ == "__main__":
    app.run(host="localhost", port=5050)

Bokeh：AjaxDataSource，如何在javascript中“重用”JSON数据

0 个答案: