chart.js开始使用chart.js


备注

Chart.js是一个简单而灵活的开源JavaScript图表库,适用于设计人员和开发人员。

有关版本信息,请查看他们的GitHub

安装或设置

Chart.js可以包含在几种不同的方式中:

NPM

在NPM项目目录中运行以下命令

npm install chart.js --save
 

CDN

在HTML链接到chart.js CDN中包含脚本标记

<html>
   <body>    
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
   </body>
</html>
 

最新版本可在cdnjs.com/libraries/Chart.js找到。

本地副本

本地副本也可以托管在您的服务器上。你可以从他们的GitHub获得持续版本。

<html>
   <body>    
      <script type="text/javascript" src="/Path/To/Chart.bundle.min.js"></script>
   </body>
</html>
 

有关安装chart.js的更多信息,请访问www.chartjs.org/docs/

最小图表示例

根据您使用的Chart.JS版本(当前的版本是2.X),语法不同,以创建条形图的最小示例( JSFiddle Demo for 2.X )。

Chart.js 2.X

<html>
    <body>
        <canvas id="myChart" width="400" height="400"></canvas>
        <script>
              var ctx = document.getElementById("myChart");
              var myChart = new Chart(ctx, {
                  type: 'bar',
                  data: {
                      labels: ["Group 1", "Group 2", "Group 3"],
                      datasets: [{
                          label: 'Groups',
                          data: [12, 19, 3]
                      }]
                  }
              });
        </script>
    </body>
</html>
 

稍微更高级的版本可以在chart.js文档JSFiddle Demo )中找到。


Chart.js 1.X

但是,如果您需要使用旧版本,请首先查看Github上的文档

现在这里是一个条形图( JSFiddle Demo )的最小例子:

<html>
    <body>
        <canvas id="myChart" width="400" height="400"></canvas>
        <script>
            var ctx = document.getElementById("myChart");
            var myChart= new Chart(ctx).Bar({
                labels: ["Group 1", "Group 2", "Group 3"],
                datasets: [
                {
                    label: "Group",
                    data: [12, 19, 3]
                }]
            });
        </script>
    </body>
</html>
 

稍微更高级的版本可以在Github文档JSFiddle Demo )中找到。