S1 Chart.js 快速入门

【本文概要】
S1-1 Chart.js 概述
S1-2 创建第一个实例
S1-3 实例练习
S1-4 Chart.js 的安装方式
S1-5 Chart.js 的构建方式
S1-6 Chart.js 的加载方式

S1-1 Chart.js 概述

1.介绍

为设计和开发人员准备的简单、灵活的 JavaScript 图表工具

2.相关网站

• 官网：http://www.chartjs.org/
• Github: https://github.com/chartjs/Chart.js
• 文档： https://chartjs.bootcss.com/docs/

3.特性

• 开源：Chart.js 是由社区共同维护的开源项目，欢迎任何人参与！
• 8种图表类型：支持折线图、柱状图、雷达图、饼图、极地图、气泡图、离散图、Area
• HTML5 Canvas：在所有现代浏览器（IE9+）上都有高效的绘图效率。
• 响应式：根据窗口尺寸的变化重绘所有图表，展现更加细腻。

S1-2 创建第一个实例

将左侧表格中的数据转为右侧的柱状图展示

image.png

• 【第1步】为Chart 准备一个具备大小（宽高）的 DOM

<!-- 为Chart 准备一个具备大小（宽高）的 DOM -->
<div style="width:600px;">
    <canvas id="myChart"></canvas>
</div>

• 【第2步】下载并引入Chart.js文件
  文件地址：https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js

<!--引入Chart.js文件-->
<script src="../lib/Chart.js" type="text/javascript" charset="utf-8"></script>

• 【第3步】获取元素

var ctx = document.getElementById("myChart");

• 【第4步】创建一个Chart实例

var myChart = new Chart(ctx,{ // 创建一个实例
    type: 'bar', // 图表类型
    data: { // 图表数据
        labels: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        datasets:[
            {
                label: '生产量',
                data:[2000,3000,4000,5000,4000,6000,8000,7000,5000,2000,1000,9000],
                backgroundColor:'#FF6384',
                borderColor: '#FF6384',
            },
        ]
    },
    options: { // 图表配置项
        title: {
            display: true,
            text: '2017年度杰克工厂月度生产量'
        },
        scales: { // 刻度
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

注：关于图表中的配置说明，会在后续章节详细讲解。
效果演示：https://91jack.github.io/chart.js_tutorial/s01/firstdemo.html
完整代码：https://github.com/91jack/chart.js_tutorial/blob/master/s01/firstdemo.html

S1-3 实例练习

看完了上面的例子，是不是感觉soeasy,来来来，看下面表格的数据，你敢不敢试一下？

image.png

效果演示：https://91jack.github.io/chart.js_tutorial/s01/firsttask.html
代码地址：https://github.com/91jack/chart.js_tutorial/blob/master/s01/firsttask.html

S1-4 Chart.js 的安装方式

• npm

npm install chart.js --save

• bower

bower install chart.js --save

• cdn
  https://cdnjs.com/libraries/Chart.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

• jsDelivr
  https://www.jsdelivr.com/package/npm/chart.js?path=dist

• Github 下载
  https://github.com/chartjs/Chart.js/releases/tag/v2.7.2

建议：初学者建议将文件下载到本地，进行引入使用

S1-5 Chart.js 的构建方式

Chart.js提供了两种不同的构造方式供你选择。
在这里可以下载相应的文件。

• 独立构建
  文件：
  -- dist/Chart.js
  -- dist/Chart.min.js

注意：此版本仅包含Chart.js。如果使用此版本，并且需要时间轴，则需要在构建之前将Moment.js包含进项目。

• 完整构建
  -- dist/Chart.bundle.js
  -- dist/Chart.bundle.min.js

注意：bundle版集成了Moment.js文件。如果你想使用时间轴并希望包含单个文件，则应该使用该版本。如果你已经在应用程序中引用了Moment.js，请使用上面的构造方式，不然将会在程序中包含两个Moment.js，这样会导致页面加载时间增加或潜在的版本引用问题。

S1-6 Chart.js 的加载方式

Chart.js可以与JavaScript集成或与不同的模块加载器集成。下面的例子显示了如何在不同的方式中加载Chart.js。

• ES6 模块

import Chart from 'chart.js';
var myChart = new Chart(ctx, {...});

• Script 标签（新手推荐）

<script src="path/to/chartjs/dist/Chart.js"></script>
<script>
    var myChart = new Chart(ctx, {...});
</script>

• Common JS

var Chart = require('chart.js');
var myChart = new Chart(ctx, {...});

• Require JS

require(['path/to/chartjs/dist/Chart.js'], function(Chart){
    var myChart = new Chart(ctx, {...});
});