如何使用 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} ({d}%)" //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
 },
 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框架中的两个基本概念

安装和导入模块

读取数据并且绘制折线图

添置一个下拉框

添加回调函数

您的项目需求