下一节:

  ChartJS 教程

  • 什么是 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用于Webpack 或 externalRollup））。 
    // 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, {...});
  });
});
下一节: