ChartJS 教程



kc

  • 什么是 Chart.js

    chartjs
    Chart.js 适用于设计人员和开发人员的简单而灵活的 JavaScript 图表
    Chart.js 通过8种不同方式可视化您的数据;它们每个都具有动画性和可定制性。
    Chart.js 在所有现代浏览器(IE11 +)上均具有出色的渲染性能。
    Chart.js 在窗口调整大小时重新绘制图表,以实现完美的刻度粒度。
  • 先决条件

    在学习 Chart.js 之前,您应该对以下内容有基本的了解:
  • 安装

    Chart.js 可以通过 npm 或 bower 安装。建议以这种方式获取 Chart.js

    NPM

    npm install chart.js --save
    

    bower

    bower install chart.js --save
    

    CDN

    https://cdnjs.com/libraries/Chart.js
    
  • 环境

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

    脚本标签

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

    普通JS

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

    Webpack

    import Chart from 'chart.js';
    var myChart = new Chart(ctx, {...});
    
    注意: Moment.js 与 Chart.js 一起作为依赖项安装。如果您不想使用 Moment.js(要么是因为您使用了不同的日期适配器,要么仅仅是因为不需要时间功能),则必须配置捆绑程序以排除此依赖项(例如,externals用于WebpackexternalRollup))。
    // Webpack
    {
        externals: {
            moment: 'moment'
        }
    }
    
    // Rollup
    {
        external: ['moment']
    }
    

    RequireJS

    RequireJS 可以不加载 CommonJS 的模块是,所以一定要要求 UMD 的一个构建,而不是(即dist/Chart.js,dist/Chart.min.js等)。
    require(['path/to/chartjs/dist/Chart.min.js'], function(Chart){
      var myChart = new Chart(ctx, {...});
    });
    
    注:启动V2.8,Moment.js 是一个可选的依赖 Chart.js 和 Chart.min.js。为了在 Moment.js 中使用时间刻度,您需要在需要 Chart.js 之前确保 Moment.js 已完全加载。您可以使用垫片:
    require.config({
      shim: {
          'chartjs': {
              deps: ['moment']    // enforce moment to be loaded before chartjs
          }
      },
      paths: {
          'chartjs': 'path/to/chartjs/dist/Chart.min.js',
          'moment': 'path/to/moment'
      }
    });
    
    require(['chartjs'], function(Chart) {
      new Chart(ctx, {...});
    });
    
    或者简单地使用两个嵌套require():
    require(['moment'], function() {
      require(['chartjs'], function(Chart) {
          new Chart(ctx, {...});
      });
    });