Question

我需要使用BokehJs构建动态直方图。我使用ColumnDataSource初始化直方图，例如我设置了一个3条直方图。然后我更改ColumnDataSource并更新直方图。当新的ColumnDataSource有3个或更少的条形时，直方图将更新。但是，如果新的ColumnDataSource有超过3个柱，则只会更新3个柱，否则不会显示其他柱。任何人都知道如何用超过初始值的条数更新直方图？谢谢。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>histogram</title>
    <link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-0.12.7.min.css" type="text/css" />
    <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.7.min.js"></script>
    <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-api-0.12.7.min.js"></script>
</head>

<body>

<button id="removeBar">2 bars</button>
<button id="addBar">3 bars</button>
<button id="addAnotherBar">4 bars</button>

<div id="plot"></div>

<script type="text/javascript">

    // the initial source has 3 bars
    var source = new Bokeh.ColumnDataSource({
      data: {       
          top:[2, 3, 4],
          bottom:[0,0,0],
          left:[-0.5, 0.5, 1.5],
          right:[0.5, 1.5, 2.5]
          }
    });

    var p = Bokeh.Plotting.figure({plot_width:400, plot_height:400});

    var quad = p.quad({

            top:{ field: "top" },
            bottom:{ field: 'bottom'},
            left:{ field: 'left'},
            right:{ field: 'right'},
            source: source,

            line_color:"#f0027f",
            fill_color:"#B3DE69"})

    Bokeh.Plotting.show(p, document.getElementById('plot'));


    var removeBar = document.getElementById('removeBar');

    // update source with 2 bars, this will work
    removeBar.addEventListener('click', function () {

        source.data.top=[1, 4]
        source.data.bottom=[0, 0]
        source.data.left=[-0.8, 0.2] 
        source.data.right=[0.1, 2.9]
        source.change.emit();

    });

    var addBar = document.getElementById('addBar');

    // update source with 3 bars, this will work
    addBar.addEventListener('click', function () {

        source.data.top=[1, 8, 5]
        source.data.bottom=[0, 0, 0]
        source.data.left=[-0.5, 0.5, 1.5]
        source.data.right=[0.2, 1.2, 2.5]
        source.change.emit();
    });     

    var addAnotherBar = document.getElementById('addAnotherBar');

    // update source with 4 bars, this will not work!!!
    addAnotherBar.addEventListener('click', function () {

        source.data.top = [5, 4, 6, 7]
        source.data.bottom = [0, 0, 0, 0]
        source.data.left = [-0.7, 0.5, 1.4, 2.9]
        source.data.right = [0.1, 1.3, 2.8, 3.1]
        source.change.emit();           
    }); 
</script>
</body>
</html>

动态直方图Bokehjs

0 个答案: