中繼器&amp;三角函數繪制高復用折線圖

文將講解如何通過中繼器與三角繪制一個折線，并實現高復用（做簡單的改變即可適應于不同的需求，如改變數值直接改變折線的樣子，文末附源文件下載。）

原型界面：

中繼器對應的數值：

最終html效果:

現在我們就來看看如何實現呢？

中繼器數值分為三個：

xulie:序列（無意義）
zhi1:每個線段起點的值
zhi2:每個線段重點的值（zhi2=后一個序列的zhi1）

相應的中繼器內的原件分為是四個：

起點半圓：d1；
終點半圓：d2；
線段：t；
背景（半透明層）：yt （為了出背景交替的效果，也是作為隔斷的寬）。

將值帶入：

d1的坐標（0，[[This.y-Item.zhi1-5]]）

y=當前點的位置-應該上移動的位置；應該上移動的位置=zhi1+6（起點半圓的半徑）-1（線寬的一半）

d2的坐標（[[yt.width-6]]，[[This.y-Item.zhi2-5]]）

x=一個隔斷的寬度-終點半圓的半徑】【y=當前點的位置-應該上移動的位置；應該上移動的位置=zhi2+6（起點半圓的半徑）-1（線寬的一半）

現在重點來了，對線段的處理分為如下三部：

將線段移動到應該的位置d；
計算出兩點之間的斜線的長度l，并改變線段的尺寸為l；
計算出線段應該旋轉的角度，并旋轉線段。

直接上公式了：

移動位置為（0，[[This.y-Item.zhi1-5]]）。
線段長度為（[[Math.pow（This.width*This.width+（Item.zhi2-Item.zhi1）*（Item.zhi2-Item.zhi1）,0.5）]]）【y= （隔斷的寬度^2+起點終點的高度差^2）開平方】。
旋轉的角度為（[[Math.atan（Item.zhi2-Item.zhi1）/yt.width）*180/3.14]]）【角度=atan（起點終點的y軸差/起點終點的x軸差）】。

大功告成！

改變數值在運行一下：

是不是很簡單呢？

再講講如何復用：

若需要改變數據條數，直接為中繼器添加數據幾個；
若需要改變一個隔斷的寬度，直接改變中繼器中的的線段t的長度與背景半透明層yt的寬，并調整終點的起始位置即可；
需要調整整個折線圖的高度，直接改變中級其中的線段 t 起點終點半圓（d1,d2）的位置，并改變半透明層yt的高度即可。

這個頁面是參考的是公眾平臺助手的一個數據界面，完整界面如下（源文件可下載）：

原型文件下載：

密碼：e48t

本文由 @ ytw 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels，基于 CC0 協議

文是關于使用 chart.js 在 JavaScript 中制作圖表的詳細教程。

有許多JavaScript 庫可用于繪制不同的圖表，包括折線圖、條形圖、圖形等等。

如果您正在嘗試學習如何使用 JavaScript 在您的網站上動態顯示數據，Chart.js是您可以測試的庫之一。

React是最好的 JavaScript 框架之一，還提供了一組很酷的圖表庫，您可以通過這些庫創建 Web 和混合應用程序的酷界面。

開始使用 Chart.js 開發數據可視化的步驟是什么？

在本文中了解如何操作。

什么是 Chart.js？

Chart.js 是一個開源的數據可視化 JavaScript 庫，可以繪制基于 HTML 的圖表。

它目前能夠支持八種可以動畫的交互式圖表。要使用 chart.js 創建基于 HTML 的圖表，您需要一個HTML 畫布來顯示它。

該庫可用于一系列數據集和其他自定義參數，如邊框顏色、背景顏色等。

其中之一的數據集稱為標簽數據集，即 X 軸的值。另一個是數字的集合，通常沿著 Y 軸。

還需要在圖表對象內部定義圖形類型，以確保庫可以確定要繪制什么圖形。

使用 Chart.js 在 JavaScript 中創建圖表

正如我們之前提到的，您可以使用 chart.js 制作各種圖表。

在本教程中，我們將從條形圖和折線圖開始。一旦您了解了這些圖表類型的概念，您將擁有繪制其他可用圖表所需的信息和工具。

首先使用 chart.js，創建所需的文件。在本指南中，文件的名稱將是 chart.html、plot.js 和 index.css。您可以使用任何命名約定來命名您的文件。

然后，將以下代碼復制并粘貼到 HTML 文檔的標題區域。這將創建提供指向 Chart.js 內容交付網絡 ( CDN ) 的鏈接。

在 chart.html 上：

創建HTML畫布以顯示圖表。為您的圖表提供其 ID。此外，連接位于 head 部分的 CSS (index.css) 文檔并鏈接到 body 部分的 JavaScript (plot.js) 文件。

HTML文件的格式如下：

<!DOCTYPE HTML><html> <head> <title> Chart </title> <link rel="stylesheet" href="index.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script> </head> <body> <header> <h1> Charts </h1> </header> <canvas id="plots" style="width:100%;max-width:700px"></canvas><script src="plot.js"></script></body></htm/>

在你的 CSS 中：

body{ background-color:#383735;}h1{ color:#e9f0e9; margin-left:43%;}#plots{ margin:auto; background-color: #2e2d2d;}

上面顯示的CSS樣式不是標準的。你可以根據你的喜好，根據你的 DOM 的結構來設置它的樣式。當您完成 HTML 或 CSS 文件并準備好使用 JavaScript 創建圖表時。

折線圖

對于要使用 chart.js 創建的折線圖，您需要將圖表類型更改為折線。這告訴庫如何繪制折線圖。

為了顯示這一點，在 JavaScript 文件中：

// Get the HTML canvas by its id plots = document.getElementById("plots");<strong>// Example datasets for X and Y-axesstrong> var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]; <strong>//Stays on the X-axisstrong> var traffic = [65, 59, 80, 81, 56, 55, 60] //Stays on the Y-axis // Create an instance of Chart object:new Chart(plots, { type: 'line', <strong>//Declare the chart typestrong> data: { labels: months, <strong>//X-axis datastrong> datasets: [{ data: traffic, <strong>//Y-axis datastrong> backgroundColor: '#5e440f', borderColor: 'white', fill: false, //Fills the curve under the line with the background color. It's true by default }] },});

輸出：

隨意將您的填充值更改為真實，使用其他數據或修改顏色以觀察發生的情況。

如您所見，頂部附近有一個額外的圖例框。您可以將其從選項參數中取出。

除了刪除或添加圖例之外，它的選項參數還可用于進行其他調整。例如，您可以應用它來使軸從零開始。

定義選項參數。這是 JavaScript 文件中圖表部分的外觀：

// Create an instance of Chart object:new Chart(plots, { type: 'line', <strong>//Declare the chart typestrong> data: { labels: months, <strong>//X-axis datastrong> datasets: [{ data: traffic, <strong>//Y-axis datastrong> backgroundColor: '#5e440f', <strong>//Color of the dotsstrong> borderColor: 'white', <strong>//Line colorstrong> fill: false, //Fills the curve under the line with the background color. It's true by default }] },<strong> //Specify custom options:strong> options:{ legend: {display: false}, //Remove the legend box by setting it to false. It's true by default. //Specify settings for the scales. To make the Y-axis start from zero, for instance: scales:{ yAxes: [{ticks: {min: 0}}] //You can repeat the same for X-axis if it contains integers. } } });

輸出：

您還可以為每個點的背景選擇不同的顏色。然而，這種方式的背景顏色變化通常更適合條形圖。

使用 ChartJS 創建條形圖

這是唯一一次您必須將圖表類型更改為條形。無需更改顏色選項的選項，因為條形將自動繼承其背景顏色：

// Create an instance of Chart object:new Chart(plots, { type: 'bar', <strong>//Declare the chart typestrong> data: { labels: months, <strong>//X-axis datastrong> datasets: [{ data: traffic, <strong>//Y-axis datastrong> backgroundColor: '#3bf70c', <strong>//Color of the barsstrong> }] }, options:{ legend: {display: false}, //Remove the legend box by setting it to false. It's true by default. }});

輸出：

隨意將 Y 軸設置為從零或任何其他值開始，就像您對折線圖所做的那樣。

要為每個條使用不同的顏色，您必須將與數據中的項目數量兼容的顏色數組傳遞給 backgroundColor 參數：

// Create an instance of Chart object:new Chart(plots, { type: 'bar', <strong>//Declare the chart typestrong> data: { labels: months, <strong>//X-axis datastrong> datasets: [{ data: traffic, <strong>//Y-axis datastrong> <strong>//Color of each barstrong>: backgroundColor: [ "rgba(196, 190, 183)", "rgba(21, 227, 235)", "rgba(7, 150, 245)", "rgba(240, 5, 252)", "rgba(252, 5, 79)", "rgb(0,12,255)", "rgb(17, 252, 5)"], }] }, options:{ legend: {display: false}, //Remove the legend box by setting it to false. It's true by default. }});

輸出：

使用 Chart.js 創建餅圖

要創建餅圖，請將圖表類型切換為餅圖。也可以使圖例的顯示為真以確定餅圖的每個部分是什么：

// Create an instance of Chart object:new Chart(plots, { type: 'pie', //Declare the chart type data: { labels: months, //Defines each segment datasets: [{ data: traffic, //Determines segment size //Color of each segment backgroundColor: [ "rgba(196, 190, 183)", "rgba(21, 227, 235)", "rgba(7, 150, 245)", "rgba(240, 5, 252)", "rgba(252, 5, 79)", "rgb(0,12,255)", "rgb(17, 252, 5)"], }] }, options:{ legend: {display: true}, //This is true by default. } });

輸出：

就像您在前面的示例中所做的那樣，通過更改圖表類型來嘗試不同的圖表。

但是，支持一些 chart.js 圖表類型。chart.js 圖表類型，您可以使用上面的代碼約定：

酒吧
雷達
線
甜甜圈
餡餅
氣泡
分散
極區

向前進

盡管您在本教程中只熟悉了餅圖、折線圖和條形圖，但使用 chart.js 繪制其他圖表的 Code Pattern 也基于相同的原理。您也可以自由地嘗試其他圖表。

者：俊欣

來源：關于數據分析與可視化

今天小編來為大家安利另外一個用于繪制可視化圖表的Python框架，名叫Dash，建立在Flask、Plotly.js以及React.js的基礎之上，在創建之出的目的是為了幫助前端知識匱乏的數據分析人員，以純Python編程的方式快速制作出交互特性強的數據可視化大屏，在經過多年的迭代發展，如今不僅僅可以用來開發在線數據可視化作品，即便是輕量級的數據儀表盤、BI應用甚至是博客或者是常規的網站都隨處可見Dash框架的影子，今天小編就先來介紹一下該框架的一些基礎知識，并且來制作一個簡單的數據可視化大屏。

Dash框架中的兩個基本概念

我們先來了解一下Dash框架中的兩個基本概念

Layout
Callbacks

Layout顧名思義就是用來設計可視化大屏的外觀和布局，添加一些例如下拉框、單選框、復選框、輸入框、文本框、滑動條等組件，其中Dash框架對HTML標簽也進行了進一步的封裝，使得我們直接可以通過Python代碼來生成和設計每一個網頁所需要的元素，例如

<div>
    <h1>Hello World!!</h1>
    <div>
        <p>Dash converts Python classes into HTML</p>
    </div>
</div>

我們轉化成Dash的Python結構就是

html.Div([
    html.H1('Hello Dash'),
    html.Div([
        html.P('Dash converts Python classes into HTML'),
    ])
])

Callbacks也就是回調函數，基本上是以裝飾器的形式來體現的，實現前后端異步通信的交互，例如我們在點擊按鈕或者下拉框之后出現的功能就是通過回調函數來實現的。

安裝和導入模塊

在導入模塊之前，我們先用pip命令來進行安裝，

! pip install dash   
! pip install dash-html-components
! pip install dash-core-components                           
! pip install plotly

然后我們導入這些剛剛安裝完的模塊，其中dash-html-components用來生成HTML標簽，dash-core-components模塊用來生成例如下拉框、輸入框等組件，這里我們還需要用到plotly模塊，因為我們需要用到的數據來自該模塊，里面是一眾互聯網公司過去一段時間中股價的走勢

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

讀取數據并且繪制折線圖

那么我們讀取數據并且用plotly來繪制折線圖，代碼如下

app = dash.Dash()   #實例化Dash
df = px.data.stocks() #讀取股票數據 

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()

我們點擊運行之后會按照提示將url復制到瀏覽器當中便可以看到出來的結果了，如下所示

從代碼的邏輯上來看，我們通過Dash框架中的Div方法來進行頁面的布局，其中有參數id來指定網頁中的元素，以及style參數來進行樣式的設計，最后我們將會指出來的圖表放在dcc.Graph()函數當中。

添置一個下拉框

然后我們再添置一個下拉框，當我們點擊這個下拉框的時候，可是根據我們的選擇展示不同公司的股價，代碼如下

dcc.Dropdown(id='dropdown',
             options=[
                 {'label': '谷歌', 'value': 'GOOG'},
                 {'label': '蘋果', 'value': 'AAPL'},
                 {'label': '亞馬遜', 'value': 'AMZN'},
             ],
             value='GOOG'),

output

options參數中的label對應的是下拉框中的各個標簽，而value對應的是DataFrame當中的列名

df.head()

output

添加回調函數

最后我們將下拉框和繪制折線圖的函數給連接起來，我們點擊下拉框選中不同的選項的時候，折線圖也會相應的產生變化，

@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參數，里面的component_id對應的是下拉框的id也就是dropdown，而Output參數，當中的component_id對應的是折線圖的id也就是bar_plot，我們來看一下最后出來的結果如下

最后，全部的代碼如下所示

在線咨詢

上一篇：一個零依賴的漂亮的JavaScript彈框插件-sweetalert2
下一篇：HTML基本機構

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

中繼器&amp;amp;三角函數繪制高復用折線圖

文是關于使用 chart.js 在 JavaScript 中制作圖表的詳細教程。

什么是 Chart.js？

使用 Chart.js 在 JavaScript 中創建圖表

折線圖

使用 ChartJS 創建條形圖

使用 Chart.js 創建餅圖

向前進

Dash框架中的兩個基本概念

安裝和導入模塊

讀取數據并且繪制折線圖

添置一個下拉框

添加回調函數

您的項目需求

中繼器&三角函數繪制高復用折線圖