- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在开发一个仪表板。这是我的代码:
# IMPORT SECTION
import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import numpy as np
import pandas as pd
from math import ceil
from matplotlib.cm import Set3
# INPUT DATA
n = 7
d_min = 0.2
d_max = 0.8
d_step = 0.1
N_min = 2000
N_max = 8000
N_step = 1000
D = 40
h = 20
dataframe_file = 'data.xlsx'
# COLOR AND FONT DEFINITION
grey = '#e0e1f5'
black = '#212121'
scatter_colors = ['#' + ''.join(['{:02x}'.format(int(255*Set3(i)[j])) for j in range(3)]) for i in range(n)]
fontsize = 18
fontfamily = 'Arial, sans-serif'
# READ CSV DATA
df = pd.read_excel(dataframe_file)
# CREATE DATA FOR DASH DATATABLE
df_scatter_colors = ceil(len(df) / len(scatter_colors)) * scatter_colors
df_scatter_colors = df_scatter_colors[:len(df)]
df.insert(loc = 0, column = 'COLOR', value = df_scatter_colors)
headers = [{"name": i, "id": i} for i in df.columns]
table = df.to_dict('records')
table_colors = [{'if': {'row_index': i, 'column_id': 'COLOR'},
'background-color': df.iloc[i]['COLOR'],
'color': df.iloc[i]['COLOR']} for i in range(df.shape[0])]
# CREATE DATA AND LAYOUT FOR THE SCATTERPLOT
x_jitter = 0.05 * N_step * np.random.randn(len(df))
y_jitter = 0.05 * d_step * 1000 * np.random.randn(len(df))
data = [go.Scatter(x = df['NUMBER'] + x_jitter,
y = df['DIAMETER'] + y_jitter,
text = df['PRODUCT'],
mode = 'markers',
hoverinfo = 'skip',
showlegend = False,
marker_color = 'rgba(0, 0, 0, 0)',
marker = {'size': 25,
'line': {'color': df['COLOR'],
'width': 8}})]
layout = go.Layout(plot_bgcolor = black,
hovermode = 'x unified',
uirevision = 'value')
figure = go.Figure(data = data, layout = layout)
# DASHBOARD LAYOUT
app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP])
app.layout = html.Div(id = 'general_div',
children = [html.Div(id = 'first_row',
children = [dcc.Graph(id = 'main_graph',
figure = figure,
style = {'height': 800,
'width': 1400})],
className = 'row'),
html.Div(id = 'second_row',
children = [dash_table.DataTable(id = 'main_table',
columns = headers,
data = table,
style_data_conditional = table_colors,
style_table = {'margin-left': '3vw',
'margin-top': '3vw'},
style_cell = {'font-family': fontfamily,
'fontSize': fontsize},
style_header = {'backgroundColor': 'rgb(230, 230, 230)',
'fontWeight': 'bold'})],
className = 'row')])
# CALLBACK DEFINITION
@app.callback(Output('main_table', 'style_data_conditional'),
[Input('main_graph', 'selectedData'),
Input('main_table', 'style_data_conditional')])
def display_selected_data(selectedData, style_data_conditional):
# what to do here and how to run this callback?
return style_data_conditional
if __name__ == "__main__":
app.run_server()
在仪表板中存在散点图(
dcc.Graph
)和表格(
dash_table.DataTable
)。散点图的每个点对应于表格的特定行,我从 excel 文件中读取这些数据。
PRODUCT CODE NUMBER DIAMETER
AAAAA 1412 8000 0.049
BBBBB 1418 3900 0.08
CCCCC 1420 7600 0.06
DDDDD 1426 8500 0.049
EEEEE 1430 3900 0.08
FFFFF 1442 3900 0.08
GGGGG 1490 8500 0.049
HHHHH 1504 9000 0.18
IIIII 1514 5500 0.224
JJJJJ 1584 7600 0.06
KKKKK 1606 8500 0.049
LLLLL 1618 7600 0.06
MMMMM 1638 7600 0.06
NNNNN 1640 7600 0.06
OOOOO 1666 3900 0.08
PPPPP 1670 8000 0.049
QQQQQ 1672 8000 0.049
RRRRR 1674 7600 0.06
SSSSS 1700 7100 0.071
TTTTT 1704 8500 0.049
UUUUU 1712 7600 0.06
VVVVV 1718 7600 0.06
WWWWW 1722 8000 0.065
我想实现这个功能:当用户选择散点图中的某个点时,代码突出显示表中的相应行(例如将这些行中单元格的背景颜色更改为
'pink'
,除了
'COLOR'
列,保持其颜色)。
@app.callback(Output('selected_data', 'children'),
[Input('main_graph', 'selectedData'),
Input('main_table', 'style_data_conditional')])
def display_selected_data(selectedData, style_data_conditional):
selected_points = []
for point in selectedData['points']:
selected_points.append(point['marker.line.color'])
selected = [{'if': {'filter': '{COLOR} eq ' + f'"{color}"',
'column_id': 'PRODUCT'},
'backgroundColor': 'pink'} for color in selected_points]
style_data_conditional.extend(selected)
return style_data_conditional
提前致谢。
Python 3.7.0
dash 1.12.0
dash-bootstrap-components 0.10.1
dash-core-components 1.10.0
dash-html-components 1.0.3
matplotlib 3.0.2
numpy 1.15.4
plotly 4.7.0
最佳答案
我设法通过 selectedData
解决了这个问题作为来自 main_graph
的输入和加工main_table
的 style_data_conditional
作为通过函数 update_table_style
的输出.
在这里,我用深灰色为奇数行着色,以提高表格的可见性,然后我通过样式条件设置所选行的背景颜色。最后,我根据每行的颜色(在每行的第一列上报告的颜色)更改第一列的背景。
代码:
# IMPORT SECTION
import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import numpy as np
import pandas as pd
from math import ceil
from matplotlib.cm import Set3
# INPUT DATA
n = 7
d_min = 0.2
d_max = 0.8
d_step = 0.1
N_min = 2000
N_max = 8000
N_step = 1000
D = 40
h = 20
dataframe_file = 'data.xlsx'
# COLOR AND FONT DEFINITION
grey = '#e0e1f5'
black = '#212121'
scatter_colors = ['#' + ''.join(['{:02x}'.format(int(255*Set3(i)[j])) for j in range(3)]) for i in range(n)]
fontsize = 18
fontfamily = 'Arial, sans-serif'
# READ CSV DATA
df = pd.read_excel(dataframe_file)
# CREATE DATA FOR DASH DATATABLE
df_scatter_colors = ceil(len(df) / len(scatter_colors)) * scatter_colors
df_scatter_colors = df_scatter_colors[:len(df)]
df.insert(loc = 0, column = 'COLOR', value = df_scatter_colors)
headers = [{"name": i, "id": i} for i in df.columns]
table = df.to_dict('records')
# CREATE DATA AND LAYOUT FOR THE SCATTERPLOT
x_jitter = 0.05 * N_step * np.random.randn(len(df))
y_jitter = 0.05 * d_step * 1000 * np.random.randn(len(df))
data = [go.Scatter(x = df['NUMBER'] + x_jitter,
y = df['DIAMETER'] + y_jitter,
text = df['PRODUCT'],
mode = 'markers',
hoverinfo = 'skip',
showlegend = False,
marker_color = 'rgba(0, 0, 0, 0)',
marker = {'size': 25,
'line': {'color': df['COLOR'],
'width': 8}})]
layout = go.Layout(plot_bgcolor = black,
hovermode = 'x unified',
uirevision = 'value')
figure = go.Figure(data = data, layout = layout)
def update_table_style(selectedData):
table_style_conditions = [{'if': {'row_index': 'odd'},
'backgroundColor': 'rgb(240, 240, 240)'}]
if selectedData != None:
points_selected = []
for point in selectedData['points']:
points_selected.append(point['pointIndex'])
selected_styles = [{'if': {'row_index': i},
'backgroundColor': 'pink'} for i in points_selected]
table_style_conditions.extend(selected_styles)
table_style_conditions.extend([{'if': {'row_index': i, 'column_id': 'COLOR'},
'background-color': df.iloc[i]['COLOR'],
'color': df.iloc[i]['COLOR']} for i in range(df.shape[0])])
return table_style_conditions
# DASHBOARD LAYOUT
app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP])
app.layout = html.Div(id = 'general_div',
children = [html.Div(id = 'first_row',
children = [dcc.Graph(id = 'main_graph',
figure = figure,
style = {'height': 800,
'width': 1400})],
className = 'row'),
html.Div(id = 'second_row',
children = [dash_table.DataTable(id = 'main_table',
columns = headers,
data = table,
# style_data_conditional = table_colors,
style_table = {'margin-left': '3vw',
'margin-top': '3vw'},
style_cell = {'font-family': fontfamily,
'fontSize': fontsize},
style_header = {'backgroundColor': 'rgb(230, 230, 230)',
'fontWeight': 'bold'})],
className = 'row')])
# CALLBACK DEFINITION
@app.callback(Output('main_table', 'style_data_conditional'),
[Input('main_graph', 'selectedData')])
def display_selected_data(selectedData):
table_style_conditions = update_table_style(selectedData)
return table_style_conditions
if __name__ == "__main__":
app.run_server()
上色部分是这样的:
table_style_conditions = [{'if': {'row_index': 'odd'},
'backgroundColor': 'rgb(240, 240, 240)'}]
if selectedData != None:
points_selected = []
for point in selectedData['points']:
points_selected.append(point['pointIndex'])
selected_styles = [{'if': {'row_index': i},
'backgroundColor': 'pink'} for i in points_selected]
table_style_conditions.extend(selected_styles)
table_style_conditions.extend([{'if': {'row_index': i, 'column_id': 'COLOR'},
'background-color': df.iloc[i]['COLOR'],
'color': df.iloc[i]['COLOR']} for i in range(df.shape[0])])
这是我得到的结果:
关于python - 通过选择散点图上的点来更新虚线表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62516573/
我查看了网站上的一些问题,但还没有完全弄清楚我做错了什么。我有一些这样的代码: var mongoose = require('mongoose'), db = mongoose.connect('m
基本上,根据 this bl.ocks,我试图在开始新序列之前让所有 block 都变为 0。我认为我需要的是以下顺序: 更新为0 退出到0 更新随机数 输入新号码 我尝试通过添加以下代码块来遵循上述
我试图通过使用随机数在循环中设置 JSlider 位置来模拟“赛马”的投注结果。我的问题是,当然,我无法在线程执行时更新 GUI,因此我的 JSlider 似乎没有在竞赛,它们从头到尾都在运行。我尝试
该功能非常简单: 变量:$table是正在更新的表$fields 是表中的字段,$values 从帖子生成并放入 $values 数组中而$where是表的索引字段的id值$indxfldnm 是索引
让我们想象一个环境:有一个数据库客户端和一个数据库服务器。数据库客户端可以是 Java 程序或其他程序等;数据库服务器可以是mysql、oracle等。 需求是在数据库服务器上的一个表中插入大量记录。
在我当前的应用程序中,我正在制作一个菜单结构,它可以递归地创建自己的子菜单。然而,由于这个原因,我发现很难也允许某种重新排序方法。大多数应用程序可能只是通过“排序”列进行排序,但是在这种情况下,尽管这
Provisioning Profile 有 key , key 链依赖于它。我想知道 key 什么时候会改变。 Key will change after renew Provisioning Pr
截至目前,我在\server\publications.js 中有我的 MongoDB“选择”,例如: Meteor.publish("jobLocations", function () { r
我读到 UI 应该始终在主线程上更新。但是,当谈到实现这些更新的首选方法时,我有点困惑。 我有各种函数可以执行一些条件检查,然后使用结果来确定如何更新 UI。我的问题是整个函数应该在主线程上运行吗?应
我在代理后面,我无法构建 Docker 镜像。 我试过 FROM ubuntu , FROM centos和 FROM alpine ,但是 apt-get update/yum update/apk
我构建了一个 Java 应用程序,它向外部授权客户端公开网络服务。 Web 服务使用带有证书身份验证的 WS-security。基本上我们充当自定义证书颁发机构 - 我们在我们的服务器上维护一个 ja
因此,我有时会在上传新版本时使用 app_offline.htm 使应用程序离线。 但是,当我上传较大的 dll 时,我收到黄色错误屏幕,指出无法加载 dll。 这似乎与我对 app_offline.
我刚刚下载了 VS Apache Cordova Tools Update 5,但遇到了 Node 和 NPM 的问题。我使用默认的空白 cordova 项目进行测试。 版本 如果我在 VS 项目中对
所以我有一个使用传单库实例化的 map 对象。 map 实例在单独的模板中创建并以这种方式路由:- var app = angular.module('myApp', ['ui', 'ngResour
我使用较早的 Java 6 u 3 获得的帧速率是新版本的两倍。很奇怪。谁能解释一下? 在 Core 2 Duo 1.83ghz 上,集成视频(仅使用一个内核)- 1500(较旧的 java)与 70
我正在使用 angular 1.2 ng-repeat 创建的 div 也包含 ng-click 点击时 ng-click 更新 $scope $scope 中的变化反射(reflect)在使用 $a
这些方法有什么区别 public final void moveCamera(CameraUpdate更新)和public final void animateCamera (CameraUpdate
我尝试了另一篇文章中某人评论中关于如何将树更改为列表的建议。但是,我在某处(或某物)有未声明的变量,所以我列表中的值是 [_G667, _G673, _G679],而不是 [5, 2, 6],这是正确
实现以下场景的最佳方法是什么? 我需要从java应用程序调用/查询包含数百万条记录的数据库表。然后,对于表中的每条记录,我的应用程序应该调用第三方 API 并获取状态字段作为响应。然后我的应用程序应该
只是在编写一些与 java 图形相关的代码,这是我今天的讲座中的非常简单的示例。不管怎样,互联网似乎说更新不会被系统触发器调用,例如调整框架大小等。在这个例子中,更新是由这样的触发器调用的(因此当我只
我是一名优秀的程序员,十分优秀!