Ошибка основного примера BokehJS - Невозможно прочитать свойство 'linspace' из неопределенного

1

Я начинаю работу с BokehJS. Надеюсь, это будет полезно всем остальным для их первой попытки с BokehJS.

В первой попытке я просто скопировал основной пример из онлайн-документации Bokeh в следующий файл html.

Однако при загрузке графика не отображается, и я получаю сообщение об ошибке в строке 15: Uncaught TypeError: Cannot read property 'linspace' of undefined at window.onload

Можете ли вы заметить что-то явно не так? Спасибо!

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://cdn.pydata.org/bokeh/release/bokeh-0.12.9.min.css">
        <link rel="stylesheet" type="text/css" href="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.9.min.css">
        <link rel="stylesheet" type="text/css" href="http://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.9.min.css">

        <script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.12.9.min.js"></script>
        <script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.9.min.js"></script>
        <script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.9.min.js"></script>

        <script type="text/javascript">
            window.onload=function(){

                // create some data and a ColumnDataSource
                var x = Bokeh.LinAlg.linspace(-0.5, 20.5, 10);
                var y = x.map(function (v) { return v * 0.5 + 3.0; });
                var source = new Bokeh.ColumnDataSource({ data: { x: x, y: y } });

                // create some ranges for the plot
                var xdr = new Bokeh.Range1d({ start: -0.5, end: 20.5 });
                var ydr = Bokeh.Range1d(-0.5, 20.5);

                // make the plot
                var plot = new Bokeh.Plot({
                    title: "BokehJS Plot",
                    x_range: xdr,
                    y_range: ydr,
                    plot_width: 400,
                    plot_height: 400,
                    background_fill_color: "#F2F2F7"
                });

                // add axes to the plot
                var xaxis = new Bokeh.LinearAxis({ axis_line_color: null });
                var yaxis = new Bokeh.LinearAxis({ axis_line_color: null });
                plot.add_layout(xaxis, "below");
                plot.add_layout(yaxis, "left");

                // add grids to the plot
                var xgrid = new Bokeh.Grid({ ticker: xaxis.ticker, dimension: 0 });
                var ygrid = new Bokeh.Grid({ ticker: yaxis.ticker, dimension: 1 });
                plot.add_layout(xgrid);
                plot.add_layout(ygrid);

                // add a Line glyph
                var line = new Bokeh.Line({
                    x: { field: "x" },
                    y: { field: "y" },
                    line_color: "#666699",
                    line_width: 2
                });
                plot.add_glyph(line, source);

                // add the plot to a document and display it
                var doc = new Bokeh.Document();
                doc.add_root(plot);
                var div = document.getElementById("myPlot");
                Bokeh.embed.add_document_standalone(doc, div);

            };
        </script>
    </head>
    <body>
        <div id="myPlot"></div>
    </body>
</html>
Теги:
bokeh
plot
undefined

1 ответ

2
Лучший ответ

вам скорее всего не хватает api lib. Попробуйте ниже пример.

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://cdn.pydata.org/bokeh/release/bokeh-0.12.9.min.css">
        <link rel="stylesheet" type="text/css" href="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.9.min.css">
        <link rel="stylesheet" type="text/css" href="http://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.9.min.css">

        <script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.12.9.min.js"></script>
        <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-api-0.12.9.min.js"></script>

        <script type="text/javascript">
            window.onload=function(){

                // create some data and a ColumnDataSource
                var x = Bokeh.LinAlg.linspace(-0.5, 20.5, 10);
                var y = x.map(function (v) { return v * 0.5 + 3.0; });
                var source = new Bokeh.ColumnDataSource({ data: { x: x, y: y } });

                // create some ranges for the plot
                var xdr = new Bokeh.Range1d({ start: -0.5, end: 20.5 });
                var ydr = Bokeh.Range1d(-0.5, 20.5);

                // make the plot
                var plot = new Bokeh.Plot({
                    title: "BokehJS Plot",
                    x_range: xdr,
                    y_range: ydr,
                    plot_width: 400,
                    plot_height: 400,
                    background_fill_color: "#F2F2F7"
                });

                // add axes to the plot
                var xaxis = new Bokeh.LinearAxis({ axis_line_color: null });
                var yaxis = new Bokeh.LinearAxis({ axis_line_color: null });
                plot.add_layout(xaxis, "below");
                plot.add_layout(yaxis, "left");

                // add grids to the plot
                var xgrid = new Bokeh.Grid({ ticker: xaxis.ticker, dimension: 0 });
                var ygrid = new Bokeh.Grid({ ticker: yaxis.ticker, dimension: 1 });
                plot.add_layout(xgrid);
                plot.add_layout(ygrid);

                // add a Line glyph
                var line = new Bokeh.Line({
                    x: { field: "x" },
                    y: { field: "y" },
                    line_color: "#666699",
                    line_width: 2
                });
                plot.add_glyph(line, source);

                // add the plot to a document and display it
                var doc = new Bokeh.Document();
                doc.add_root(plot);
                var div = document.getElementById("myPlot");
                Bokeh.embed.add_document_standalone(doc, div);

            };
        </script>
    </head>
    <body>
        <div id="myPlot"></div>
    </body>
</html>
Поделиться
  • 0
    Спасибо за решение @Alexus! Эта часть информации отсутствовала в документации Bokeh (не могу их винить, они делают потрясающую работу по разработке этой библиотеки!).
  • 0
    Я думаю, что это упомянуто мимоходом в разделе «Встраивание», но, как вы заметили, оно должно быть в разделе BokehJS. Можете ли вы создать проблему GitHub, чтобы предложить это?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню