整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
本例演示：如何使用 <noframes> 標(biāo)簽。
<html> <frameset cols="25%,25%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> <noframes> <body>您的瀏覽器無法處理框架！</body> </noframes> </frameset> </html>
HTML基礎(chǔ)教程：框架實例大合集
本例演示如何制作含有三份文檔的框架結(jié)構(gòu)，同時將他們混合置于行和列之中。
<html> <frameset rows="50%,50%"> <frame src="/example/html/frame_a.html"> <frameset cols="25%,75%"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> </frameset> </frameset> </html>
HTML基礎(chǔ)教程：框架實例大合集
本例演示 noresize 屬性。在本例中，框架是不可調(diào)整尺寸的。在框架間的邊框上拖動鼠標(biāo)，你會發(fā)現(xiàn)邊框是無法移動的。
<html> <frameset cols="50%,*,25%"> <frame src="/example/html/frame_a.html" noresize="noresize" /> <frame src="/example/html/frame_b.html" /> <frame src="/example/html/frame_c.html" /> </frameset> </html>
HTML基礎(chǔ)教程：框架實例大合集
本例演示如何制作導(dǎo)航框架。導(dǎo)航框架包含一個將第二個框架作為目標(biāo)的鏈接列表。名為 "contents.htm" 的文件包含三個鏈接。
<html> <frameset cols="120,*"> <frame src="/example/html/html_contents.html" > <frame src="/example/html/frame_a.html" name="showframe"> </frameset> </html>
HTML基礎(chǔ)教程：框架實例大合集
HTML基礎(chǔ)教程：框架實例大合集
HTML基礎(chǔ)教程：框架實例大合集
本例演示如何創(chuàng)建內(nèi)聯(lián)框架（HTML 頁中的框架）。
<html> <body> <iframe wigth="200" height="100" src="/i/eg_landscape.jpg"></iframe> <p>一些老的瀏覽器不支持 iframe。</p> <p>如果得不到支持，iframe 是不可見的。</p> </body> </html>
HTML基礎(chǔ)教程：框架實例大合集
本例演示兩個框架。其中的一個框架設(shè)置了指向另一個文件內(nèi)指定的節(jié)的鏈接。這個"link.htm"文件內(nèi)指定的節(jié)使用 <a name="C9"> 進(jìn)行標(biāo)識。
<html> <frameset cols="20%,80%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/link.html#C9"> </frameset> </html>
HTML基礎(chǔ)教程：框架實例大合集
本例演示兩個框架。左側(cè)的導(dǎo)航框架包含了一個鏈接列表，這些鏈接將第二個框架作為目標(biāo)。第二個框架顯示被鏈接的文檔。導(dǎo)航框架其中的鏈接指向目標(biāo)文件中指定的節(jié)。
<html> <frameset cols="200,*"> <frame src="/example/html/content.html"> <frame src="/example/html/link.html" name="showframe"> </frameset> </html>
HTML基礎(chǔ)教程：框架實例大合集
HTML基礎(chǔ)教程：框架實例大合集
希望以上可以解決你們心中的一些疑惑，其中可能會有不對的地方或是需要改進(jìn)的地方，歡迎留言糾正。感覺還不錯歡迎關(guān)注收藏轉(zhuǎn)載哦
者： 俊欣
來源：關(guān)于數(shù)據(jù)分析與可視化
今天小編來為大家安利另外一個用于繪制可視化圖表的Python框架，名叫Dash，建立在Flask、Plotly.js以及React.js的基礎(chǔ)之上，在創(chuàng)建之出的目的是為了幫助前端知識匱乏的數(shù)據(jù)分析人員，以純Python編程的方式快速制作出交互特性強(qiáng)的數(shù)據(jù)可視化大屏，在經(jīng)過多年的迭代發(fā)展，如今不僅僅可以用來開發(fā)在線數(shù)據(jù)可視化作品，即便是輕量級的數(shù)據(jù)儀表盤、BI應(yīng)用甚至是博客或者是常規(guī)的網(wǎng)站都隨處可見Dash框架的影子，今天小編就先來介紹一下該框架的一些基礎(chǔ)知識，并且來制作一個簡單的數(shù)據(jù)可視化大屏。
我們先來了解一下Dash框架中的兩個基本概念
Layout顧名思義就是用來設(shè)計可視化大屏的外觀和布局，添加一些例如下拉框、單選框、復(fù)選框、輸入框、文本框、滑動條等組件，其中Dash框架對HTML標(biāo)簽也進(jìn)行了進(jìn)一步的封裝，使得我們直接可以通過Python代碼來生成和設(shè)計每一個網(wǎng)頁所需要的元素，例如
<div>
<h1>Hello World!!</h1>
<div>
<p>Dash converts Python classes into HTML</p>
</div>
</div>
我們轉(zhuǎn)化成Dash的Python結(jié)構(gòu)就是
html.Div([
html.H1('Hello Dash'),
html.Div([
html.P('Dash converts Python classes into HTML'),
])
])
Callbacks也就是回調(diào)函數(shù)，基本上是以裝飾器的形式來體現(xiàn)的，實現(xiàn)前后端異步通信的交互，例如我們在點擊按鈕或者下拉框之后出現(xiàn)的功能就是通過回調(diào)函數(shù)來實現(xiàn)的。
在導(dǎo)入模塊之前，我們先用pip命令來進(jìn)行安裝，
! pip install dash
! pip install dash-html-components
! pip install dash-core-components
! pip install plotly
然后我們導(dǎo)入這些剛剛安裝完的模塊，其中dash-html-components用來生成HTML標(biāo)簽，dash-core-components模塊用來生成例如下拉框、輸入框等組件，這里我們還需要用到plotly模塊，因為我們需要用到的數(shù)據(jù)來自該模塊，里面是一眾互聯(lián)網(wǎng)公司過去一段時間中股價的走勢
import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objects as go
import plotly.express as px
那么我們讀取數(shù)據(jù)并且用plotly來繪制折線圖，代碼如下
app=dash.Dash() #實例化Dash
df=px.data.stocks() #讀取股票數(shù)據(jù)
def stock_prices():
# 繪制折線圖
fig=go.Figure([go.Scatter(x=df['date'], y=df['AAPL'],
line=dict(color='firebrick', width=4), name='Apple')
])
fig.update_layout(title='股價隨著時間的變幻',
xaxis_title='日期',
yaxis_title='價格'
)
return fig
app.layout=html.Div(id='parent', children=[
html.H1(id='H1', children='Dash 案例一', style={'textAlign': 'center',
'marginTop': 40, 'marginBottom': 40}),
dcc.Graph(id='line_plot', figure=stock_prices())
])
if __name__=='__main__':
app.run_server()
我們點擊運(yùn)行之后會按照提示將url復(fù)制到瀏覽器當(dāng)中便可以看到出來的結(jié)果了，如下所示
從代碼的邏輯上來看，我們通過Dash框架中的Div方法來進(jìn)行頁面的布局，其中有參數(shù)id來指定網(wǎng)頁中的元素，以及style參數(shù)來進(jìn)行樣式的設(shè)計，最后我們將會指出來的圖表放在dcc.Graph()函數(shù)當(dāng)中。
然后我們再添置一個下拉框，當(dāng)我們點擊這個下拉框的時候，可是根據(jù)我們的選擇展示不同公司的股價，代碼如下
dcc.Dropdown(id='dropdown',
options=[
{'label': '谷歌', 'value': 'GOOG'},
{'label': '蘋果', 'value': 'AAPL'},
{'label': '亞馬遜', 'value': 'AMZN'},
],
value='GOOG'),
output
options參數(shù)中的label對應(yīng)的是下拉框中的各個標(biāo)簽，而value對應(yīng)的是DataFrame當(dāng)中的列名
df.head()
output
最后我們將下拉框和繪制折線圖的函數(shù)給連接起來，我們點擊下拉框選中不同的選項的時候，折線圖也會相應(yīng)的產(chǎn)生變化，
@app.callback(Output(component_id='bar_plot', component_property='figure'),
[Input(component_id='dropdown', component_property='value')])
def graph_update(dropdown_value):
print(dropdown_value)
# Function for creating line chart showing Google stock prices over time
fig=go.Figure([go.Scatter(x=df['date'], y=df['{}'.format(dropdown_value)],
line=dict(color='firebrick', width=4))
])
fig.update_layout(title='股價隨著時間的變幻',
xaxis_title='日期',
yaxis_title='價格'
)
return fig
我們看到callback()方法中指定輸入和輸出的媒介，其中Input參數(shù)，里面的component_id對應(yīng)的是下拉框的id也就是dropdown，而Output參數(shù)，當(dāng)中的component_id對應(yīng)的是折線圖的id也就是bar_plot，我們來看一下最后出來的結(jié)果如下
最后，全部的代碼如下所示
過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。
iframe語法:
<iframe src="URL"></iframe>
該URL指向不同的網(wǎng)頁。
Iframe - 設(shè)置高度與寬度
height 和 width 屬性用來定義iframe標(biāo)簽的高度與寬度。
屬性默認(rèn)以像素為單位, 但是你可以指定其按比例顯示 (如："80%").
實例
<iframesrc="demo_iframe.htm"width="200"height="200"></iframe>
Iframe - 移除邊框
frameborder 屬性用于定義iframe表示是否顯示邊框。
設(shè)置屬性值為 "0" 移除iframe的邊框:
實例
<iframesrc="demo_iframe.htm"frameborder="0"></iframe>
使用iframe來顯示目錄鏈接頁面
iframe可以顯示一個目標(biāo)鏈接的頁面
目標(biāo)鏈接的屬性必須使用iframe的屬性，如下實例:
實例
<iframesrc="demo_iframe.htm"name="iframe_a"></iframe><p><a>RUNOOB.COM</a></p>
HTML iframe 標(biāo)簽
| 標(biāo)簽 | 說明 |
|---|---|
| <iframe> | 定義一個內(nèi)聯(lián)的iframe |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
