3

我正在 PyViz 面板中创建一个仪表板，据我所知，它在引擎盖下使用散景。它易于使用，我很快就得到了 90% 的解决方案，但最终的布局（对我来说）更容易使用普通的旧 CSS（网格布局或其他东西）。我可以将 html id 和类附加到 Python 中的每个小部件/绘图/列/行等，但我还没有找到一种方法来阻止散景在它产生的每个 div 上包含一长串内联 css。我希望布局是响应式的，没有硬编码的宽度/高度或类似的东西。

我已经main.ipynb在带有 的目录中提供面板代码template/index.html，因此涉及模板的解决方案完全可以。如果我不需要，我不想在添加到模板的许多不同根目录中创建整个仪表板，如果我可以删除生成的内联 css 属性，则从行和列生成的 html 非常适合我的目的.

我可以编写一个 Python 函数来遍历面板/散景小部件树并修改小部件（如果需要的话）。我当然也可以在 Javascript 中遍历 DOM，并在创建 div 时从 div 中删除样式属性，但这似乎不如将一些!importantcss 组合在一起那么优雅。

旁白：有谁知道如何阻止散景从 Javascript 更改 html 标题属性，或者如何从面板设置标题？

一个示例仪表板：

这是一个没有任何自定义样式的简约仪表板。它在每个 div 上生成硬编码的宽度和高度（从 Firefox devtools 元素检查器中可以看出）。仪表板左对齐并且没有有效地使用屏幕空间（左侧有很多空白，直方图的水平宽度与上面的行不同）。调整页面大小时，布局也没有响应。

import numpy
import pandas
import param
import panel
import holoviews
from IPython.display import display


panel.extension()
holoviews.extension('bokeh')

# Create syntetic dataset
N= 1000
age = numpy.random.gamma(10, 1.5, N)
defects = numpy.clip(numpy.random.chisquare(5, N) * age - 10, 0, 1e100).astype(int)
df = pandas.DataFrame({'age': age, 'defects': defects})
display(df.head(3))

# default sizing_mode
SM = 'stretch_width'


class DashboardDefinition(param.Parameterized):
    age = param.Range((0, 20), (0, None), softbounds=(0, 30))
    histogram = param.ObjectSelector('defects', ['defects', 'age'])

    def filter_data(self, table):
        return table.select(age=self.age)

    @param.depends('age')
    def make_scatter(self):
        scatter = holoviews.Points(df, ['age', 'defects'])
        selected = self.filter_data(scatter)
        return panel.panel(selected, sizing_mode=SM)

    @param.depends('age', 'histogram')
    def make_histogram(self):
        table = holoviews.Table(df, self.histogram)
        table = self.filter_data(table)
        frequencies, edges = numpy.histogram(table[self.histogram], 15)
        hist = holoviews.Histogram((frequencies, edges))
        return panel.panel(hist, sizing_mode=SM)

    def layout(self):
        return panel.Column(panel.Row(self.param,
                                      self.make_scatter,
                                      sizing_mode=SM),
                            self.make_histogram,
                            sizing_mode=SM)


dashboard = DashboardDefinition(name='Dashboard parameters')
dash_panel = dashboard.layout() 

# Define the dashboard
template = """
{% extends base %}

{% block title %}Hello world{% endblock %}

{% block contents %}
<h1>My dashboard</h1>
<p>This is my currently unstyled dashboard</p>
<br>
{{ embed(roots.dash1) }}
{% endblock %}
"""
tmpl = panel.Template(template)
tmpl.add_panel('dash1', dash_panel)
tmpl.servable()

# Uncomment to preview dashboard in jupyter notebook
#dash_panel
4

1 回答 1

1

我通过设置全息视图解决了我的具体问题（感谢https://gitter.im/pyviz/pyvizresponsive=True中的xavArtley帮助我完成这部分）。从散景文档看来，此选项已被删除，但它存在于全息视图中，并且使用它可以使内联 css 与我想要的匹配。

您必须在 javascript 运行之前设置元素的样式，否则大小会出错，但是您可以通过将自定义 css 放入模板序言中来做很多事情（后序将不起作用，至少在 Firefox 中不起作用）。

一个工作示例

这里仪表板周围的容器决定仪表板组件的大小，而不是内联 css（由 Javascript 设置以匹配周围的 div 元素）：

import numpy
import pandas
import param
import panel
import holoviews


panel.extension()
holoviews.extension('bokeh')

# Create syntetic dataset
N= 1000
age = numpy.random.gamma(10, 1.5, N)
defects = numpy.clip(numpy.random.chisquare(5, N) * age - 10, 0, 1e100).astype(int)
df = pandas.DataFrame({'age': age, 'defects': defects})


class DashboardDefinition(param.Parameterized):
    age = param.Range((0, 20), (0, None), softbounds=(0, 30))
    histogram = param.ObjectSelector('defects', ['defects', 'age'])

    def filter_data(self, table):
        return table.select(age=self.age)

    @param.depends('age')
    def make_scatter(self):
        scatter = holoviews.Points(df, ['age', 'defects'])
        selected = self.filter_data(scatter)
        hv_obj = selected.options(responsive=True, aspect=3)
        return panel.panel(hv_obj)

    @param.depends('age', 'histogram')
    def make_histogram(self):
        table = holoviews.Table(df, self.histogram)
        table = self.filter_data(table)
        frequencies, edges = numpy.histogram(table[self.histogram], 25)
        hist = holoviews.Histogram((frequencies, edges))
        hv_obj = hist.options(responsive=True, aspect=4)
        return panel.panel(hv_obj)

    def layout(self):
        return panel.Column(panel.Row(self.param,
                                      self.make_scatter,
                                      sizing_mode='stretch_width'),
                            self.make_histogram,
                            sizing_mode='stretch_width')


dashboard = DashboardDefinition(name='Dashboard parameters')
dash_panel = dashboard.layout() 

# Define the dashboard
template = """
{% extends base %}

{% block preamble %}
<style>
div#dashboard {
    width: 80%;
    margin: 0 auto;
}
</style>
{% endblock preamble %}

{% block contents %}
<div id="dashboard">
  <h1>My dashboard</h1>
  {{ embed(roots.dash1) }}
</div>
{% endblock contents %}
"""
tmpl = panel.Template(template)
tmpl.add_panel('dash1', dash_panel)
tmpl.servable(title="My page title")

# Uncomment to preview dashboard in jupyter notebook
#dash_panel
于 2019-06-07T14:53:03.317 回答