如何使用 Chart.js 在 JavaScript 中制作圖表？

文是關于使用 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 也基于相同的原理。您也可以自由地嘗試其他圖表。

沒發現 ECharts 這款神器的時候，之前所做的數據統計圖只能自個純手寫，倒也是可以實現，只不過特別的費時。后來無意中在網上瞄到 ECharts 這款專門用來生成數據圖表的插件，便嘗試了一下，那感覺真的不要太爽！

官方介紹

ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器，底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。

獲取 ECharts

1、下載地址

https://github.com/apache/incubator-echarts

2、點擊紅色箭頭按鈕，將壓縮包下載下來

image

3、echarts 庫放在解壓后文件夾中的 dist 目錄里

image

將整個 dist 目錄復制到你的項目中去，可重命名為 echarts

備注：若不想下載 ECharts 庫文件，可在頭部直接引用 bootcdn 上的 echarts 文件，地址為：

https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js

繪制數據圖表

1、柱狀圖

柱狀圖效果預覽

代碼實現

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>數據統計圖：柱狀圖</title>
 <!-- 引入 ECharts 文件 這里選擇min.js壓縮版的echarts -->
 <script src="echarts/echarts.min.js"></script>
</head>
<body>
 <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
 <div id="main" style="width: 600px;height:400px;"></div>
 <script type="text/javascript">
 // 基于準備好的dom，初始化echarts實例
 var myChart = echarts.init(document.getElementById('main'));
 // 指定圖表的配置項和數據
 var option = {
 title: {
 text: '2014-2019年 前端人均工資'
 },
 tooltip: {},//提示框組件（鼠標移動到數字表時觸發）
 xAxis: { //x軸
 data: ["2014年","2015年","2016年","2017年","2018年","2019年"]
 },
 yAxis: {},//y軸 內容會自動從以下的series.data 中獲取
 series: [{
 name: '人均工資',
 type: 'bar', //類型為：柱狀圖
 data: [3800, 4600, 5100, 5800, 6300, 7300] //x軸項目對應的數據
 }]
 };
 // 使用剛指定的配置項和數據顯示圖表。
 myChart.setOption(option);
 </script>
</body>
</html>

2、折線圖

折線圖效果預覽

代碼實現

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>數據統計圖：折線圖</title>
 <!-- 引入 ECharts 文件 這里選擇min.js壓縮版的echarts -->
 <script src="echarts/echarts.min.js"></script>
</head>
<body>
 <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
 <div id="main" style="width: 600px;height:400px;"></div>
 <script type="text/javascript">
 // 基于準備好的dom，初始化echarts實例
 var myChart = echarts.init(document.getElementById('main'));
 // 指定圖表的配置項和數據
 var option = {
 title: {
 text: '未來一周氣溫變化'
 },
 tooltip: {
 trigger: 'axis'
 },
 xAxis: {
 type: 'category',
 data: ['周一','周二','周三','周四','周五','周六','周日']
 },
 yAxis: {
 type: 'value',
 axisLabel: { //坐標軸刻度標簽的相關設置。
 formatter: '{value} °C' // 使用字符串模板，模板變量為刻度默認標簽 {value}
 }
 },
 series: [
 {
 name:'最高氣溫',
 type:'line',
 data:[11, 11, 15, 13, 12, 13, 10],
 },
 {
 name:'最低氣溫',
 type:'line',
 data:[1, -2, 2, 5, 3, 2, 0],
 }
 ]
 };
 // 使用剛指定的配置項和數據顯示圖表。
 myChart.setOption(option);
 </script>
</body>
</html>

3、餅圖

餅圖效果預覽

代碼實現

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>數據統計圖：餅圖</title>
 <!-- 引入 ECharts 文件 這里選擇min.js壓縮版的echarts -->
 <script src="echarts/echarts.min.js"></script>
</head>
<body>
 <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
 <div id="main" style="width: 600px;height:400px;"></div>
 <script type="text/javascript">
 // 基于準備好的dom，初始化echarts實例
 var myChart = echarts.init(document.getElementById('main'));
 // 指定圖表的配置項和數據
 var option = {
 title : {
 text: '某公司年齡階段的員工占比',
 x:'center'//水平居中
 },
 tooltip : {//提示框組件。
 trigger: 'item', //'item' 數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。
 formatter: "{a} <br/>{b} : {c} (igqaoqy%)" //{a}（系列名稱），{b}（數據項名稱），{c}（數值）, ioicmec（百分比）
 },
 series : [
 {
 name: '年齡占比',
 type: 'pie',
 radius : '55%',//餅圖的半徑
 center: ['50%', '60%'],//餅圖的中心（圓心）坐標，數組的第一項是橫坐標，第二項是縱坐標。
 data:[
 {value:80, name:'20-25歲'},
 {value:30, name:'26-30歲'},
 {value:20, name:'31-35歲'},
 {value:8, name:'36-40歲'},
 {value:5, name:'41歲以上'}
 ],
 itemStyle: {//圖形樣式。
 emphasis: {
 shadowBlur: 10,
 shadowOffsetX: 0,
 shadowColor: 'rgba(0, 0, 0, 0.5)'
 }
 }
 }
 ]
 };
 // 使用剛指定的配置項和數據顯示圖表。
 myChart.setOption(option);
 </script>
</body>
</html>

結語

以上繪制的圖表是數據圖中用的頻率較高的三種。不僅如此，ECharts 還可用于地理數據可視化的地圖，用于關系數據可視化的關系圖，多維數據可視化的平行坐標，還有用于 BI 的漏斗圖，并且支持圖與圖之間的混搭。更多有關 ECharts 的使用方法，可參考 ECharts 的官方文檔：

https://echarts.baidu.com/index.html

者：俊欣

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

今天小編來為大家安利另外一個用于繪制可視化圖表的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，我們來看一下最后出來的結果如下

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

在線咨詢

上一篇：css圖標- iconfont
下一篇：分享8個難忘的HTML5炫酷動畫

您的項目需求

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

整合營銷服務商

如何使用 Chart.js 在 JavaScript 中制作圖表？

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

什么是 Chart.js？

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

折線圖

使用 ChartJS 創建條形圖

使用 Chart.js 創建餅圖

向前進

Dash框架中的兩個基本概念

安裝和導入模塊

讀取數據并且繪制折線圖

添置一個下拉框

添加回調函數

您的項目需求