chart.js----初次使用遇到的坑

近日试着在项目中使用Chart.js，在尝试了很多次以后，终于把表格放在了页面上，这里简单介绍一下使用的过程。

这里先附上Chart.js的官方使用文档

https://www.chartjs.org/docs/latest/

安装及引用

      一开始，我选择了从GitHub上下载的Chart.js，但是页面并没有正确的引用，出现了报错

      在徘徊良久以后，发现了原因，因为从GitHub上面直接下在文件中，不包括dist文件，而像我这样的小白就直接在页面中引用了src目录下的chart.js，所以出现了上面的报错信息。找到原因后，解决问题就变得很简单。这里说两种将Chart.js添加到项目中的方式：

        之后会看到文件中出现了node_modules文件夹 ，我们在页面上需要引用这个目录下的/chart.js/dist/chart.js或       着/chart.js/dist/chart.min.js。

1. npm安装，这也是官方推荐的安装方式，在命令行中找打项目对应的位置，然后键入

   npm install chart.js --save

2. 从GitHub中下载，着样做的话，需要在对应的目录下进行构建，具体方法是在chart.js的目录下执行

    npm install

        之后直接在页面中引用chart.js或chart.min.js即可。

使用 

       关于使用方法及个格式，网上有很多的版本，这是由于版本原因，chart.js在更新版本之后改变了很多JS的语法，这里介绍一下当前下官方给出的用法。

       首先我们在页面上添加对应的元素：

<canvas id="myChart" width="400" height="400"></canvas>

      之后我们在JS中获取该元素：

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

     最后我们设置对应的属性及数据：

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

上述代码的结构为

         new  Chart (ctx , {

                  type: 表格的类型,

                 data: 表格的数据集，

                 options：对表格进行一些设置

        } ) 

这里重点说一下数据集的问题，上述例子中有一个labels，这个属性用来告诉页面我们的统计项，注意的是他的顺序必须和后面数据的顺序相同，以此来实现在统计图中是数据和统计项一一对应。datasets中是一个对象数组，在datasets中每一个对象代表一张表格的数据，我们也可以通过添加两个对象，在一张统计图中显示两张统计图的内容。在datasets的每一个对象中包含label、data以及其他的一些属性，这里的label，再条形图等的中，会显示在表格外面，用来告诉用户，对应该颜色的数据代表着什么，但是，在饼状图中并不会显示。这里的data属性即代表了具体的数据，同样用数组表示，前面已经说过了，这里的数组中数据的顺序必须和labels中的顺序相对应。除此之外，你可以在data中添加更多的属性来控制表格的样式，这些都可以在chart.js的官方文档中找到，值得一提的是chart.js的很多属性可以写成本数组，例如上述代码中的backgroundColor等，这样意味着我们可以对每一条数据设置对应的样式，当然，数组中的顺序要和上面的labels一一对应。

最后一提，我在使用时，返现很多刚开始接触的人可能会弄混data的结构，这里强调在data的对象数组中，一个对象就是一个统计图的数据。因为很多人喜欢使用雷达图来比较数据，所以弄清楚结构非常重要。