2017-10-25 11 views
1

BokehJS를 시작합니다. 다행히 BokehJS를 처음 시도 할 때이 방법이 다른 사람들에게 유용 할 것입니다.BokehJS 기본 예제 오류 - 정의되지 않은 'linspace'속성을 읽을 수 없습니다.

첫 번째 시도로서 간단히 Bokeh online documentation의 기본 예제를 다음 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> 

답변

2

대부분의 경우 API 라이브러리가 누락되었습니다. 아래 예제를 시도하십시오.

<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 documentation] (https://bokeh.pydata.org/en/latest/docs/installation.html#install-bokehjs)에서 누락되었습니다. (그들을 비난 할 수는 없으며, 놀라운 일자리를 개발하고 있습니다. 이 도서관!). – Astrum42

+0

"Embedding"섹션에서 언급 한 내용이 생각 났지만 BokehJS 섹션에있을뿐만 아니라 [GitHub 문제] (https://github.com/bokeh/bokeh/issues)를 만들 수 있습니까?) 이것을 제안 하는가? – bigreddot

+0

게시 됨 문제! @bigreddot – Astrum42