如何集中我的散景图

时间:2017-07-27 13:16:43

标签: python html css plot bokeh

我目前的情节有点偏右。我想搬到中心。我怎样才能改变我的CSS代码。

bokeh plot

我的代码是:

//PeerClient broadcast
public void broadcast(String message){
    try{
        for(Socket peer : pservers){
            BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(peer.getOutputStream()));
            System.out.println("Sending message: " + message + " | to socket " + peer.getPort() + " with BufferedWriter " + bw.toString());
            bw.write(message);
            bw.newLine();
            bw.flush();
        }
    } catch (IOException e){
        e.printStackTrace();
    }
}


//PeerServer listening
public void listen2(){
    try{
        for(Socket s : pclients){
           ReceiveClient rc = new ReceiveClient(id, s);
           Thread pthread = new Thread(rc);
           pthread.start();
        }
    } catch (Exception ex){
        ex.printStackTrace();
    }
}


//ReceiveClient run
public void run(){
    String message = null;
    long f0 = System.nanoTime();
    long f1;
    try{
        BufferedReader br = new BufferedReader(new InputStreamReader(sock.getInputStream()));
        while(((f1 = System.nanoTime() - f0) / 1000000000.0) < 100.0){
            if((message = br.readLine())!= null){
                System.out.println("Message received: " + message);
                messages.add(message);
            }
        }
    } catch (IOException e){
        e.printStackTrace();
    }
}



//Sample Output
Sending message: <Local Process id>: hello others | to socket <destination socket>
Sending message: 3: hello others | to socket 5000
Sending message: 3: hello others | to socket 5001
Sending message: 3: hello others | to socket 5003
Sending message: 3: hello others | to socket 5004
Sending message: 3: hello others | to socket 5005
Sending message: 3: hello others | to socket 5006
Sending message: 3: hello others | to socket 5007
Sending message: 3: hello others | to socket 5008
Sending message: 3: hello others | to socket 5009

Message received: <Remote Procid>: hello others
Message received: 5: hello others
Message received: 2: hello others
Message received: 4: hello others

我的CSS有问题吗?

修改 这是新风格

{% include "base.html" %}

{% block page_content %}

<style>
    <!--#graphs {-->
  <!--width: 50%;-->
  <!--margin: 0 auto;-->
<!--}-->

body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}

.centered {
    margin: 0 auto;
    text-align: left;
    width: 800px;
}


</style>

{{ js_resources|safe }}
{{ css_resources|safe }}
<div id="graphs" class="centered">
    {{ plot_div|safe }}
    {{ plot_script|safe }}
</div>
{% endblock %}

这是由此产生的萤火虫

update style

编辑2

这是体型

update style 2

2 个答案:

答案 0 :(得分:0)

尝试将 .centered 类更改为以下内容:

    .centered {
      display : block;
      margin : 0 auto;
      text-align: left;
      width: 800px;
      }
<div class="centered" style="background-color : red; width : 300px; height : 100px;">
<p>Here is your centered graph :)</p>
</div>

答案 1 :(得分:0)

知道了! 只需设置responsive = True。与上面提到的路易斯一起。

fig = figure(title="Menu Items Streaming", x_range=FactorRange(factors=menu_items), plot_width=1000,  responsive = True)

centered plots!