html5图表插件Chart.js用法

Chart.js是利用html5的canvas标签在你的网页上创建一个图表。

官网：http://www.chartjs.org/

Github：https://github.com/chartjs/Chart.js

使用方法：

1，在页面中创建一个canvas画布

2，在页面中调用Chart.js

Chart.js可到官网下载最新版Chart.js或者使用Chart.js cdn

3，在页面添加一段初始化脚本

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
        }]
    },

    // Configuration options go here
    options: {}
});

详细教程参考：http://www.chartjs.org/docs/latest/

官方案例参考：http://www.chartjs.org/samples/latest/

以下是我做的4个简单的图表（附代码），分别是线性，柱状，圆形/饼形。效果如下图：

html代码如下：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Chart.js - Html5 chart plugins</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  </head>
  <body>
  
  
    <div class="container">
      <h1 class="text-center">Chart.js</h1>
    </div>
    
    <div class="container">
      <div class="row">
        <div class="col-sm-6">
          <h2 class="text-center">Line Chart</h2>
          <canvas id="lines-graph"></canvas>
        </div>
        <div class="col-sm-6">
          <h2 class="text-center">Bars Chart</h2>
          <canvas id="bars-graph"></canvas>
        </div>
        <div class="w-100"></div>
        <div class="col-sm-6">
          <h2 class="text-center">Pie Charts</h2>
          <canvas id="pie-graph"></canvas>
        </div>
        <div class="col-sm-6">
          <h2 class="text-center">Doughnut Charts</h2>
          <canvas id="doughnut-graph"></canvas>
        </div>
      </div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <script>
    
    // Data for line charts
                    var lineChartData = {
                        labels: ["January", "February", "March", "April", "May", "June", "July"],
                        datasets: [
                        {
                            label: "My First dataset",
                            fill: false,
                            lineTension: 0.1,
                            backgroundColor: "rgba(75,192,192,0.4)",
                            borderColor: "rgba(75,192,192,1)",
                            borderCapStyle: 'butt',
                            borderDash: [],
                            borderDashOffset: 0.0,
                            borderJoinStyle: 'miter',
                            pointBorderColor: "rgba(75,192,192,1)",
                            pointBackgroundColor: "#fff",
                            pointBorderWidth: 1,
                            pointHoverRadius: 5,
                            pointHoverBackgroundColor: "rgba(75,192,192,1)",
                            pointHoverBorderColor: "rgba(220,220,220,1)",
                            pointHoverBorderWidth: 2,
                            pointRadius: 1,
                            pointHitRadius: 10,
                            data: [65, 59, 80, 81, 56, 55, 40],
                            spanGaps: false,
                        }
                        ]
                    };

                    var ctx = document.getElementById("lines-graph").getContext("2d");
                    var LineChart = new Chart(ctx, {
                        type: 'line',
                        data: lineChartData,
                        responsive: true,
                        bezierCurve : false
                    });
    
    
    
      // Bar Charts
      var barChartData = {
          labels: ["January", "February", "March", "April", "May", "June", "July"],
          datasets: [
          {
              label: "My First dataset",
              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,
              data: [65, 59, 80, 81, 56, 55, 40],
          }
          ]
      };
  
      var ctx = document.getElementById("bars-graph").getContext("2d");
      var BarChart = new Chart(ctx, {
          type: 'bar',
          data: barChartData,
          responsive : true
      });
      
// Data for pie chart
                    var pieData = {
                        labels: [
                        "Red",
                        "Blue",
                        "Yellow"
                        ],
                        datasets: [
                        {
                            data: [300, 50, 100],
                            backgroundColor: [
                            "#FF6384",
                            "#36A2EB",
                            "#FFCE56"
                            ],
                            hoverBackgroundColor: [
                            "#FF6384",
                            "#36A2EB",
                            "#FFCE56"
                            ]
                        }]
                    };

                    var ctx = document.getElementById("pie-graph").getContext("2d");
                    var PieChart = new Chart(ctx,{
                        type: 'pie',
                        data: pieData
                    });
                    
                    
// Data for doughnut chart
                    var doughnutData = {
                        labels: [
                        "Red",
                        "Blue",
                        "Yellow"
                        ],
                        datasets: [
                        {
                            data: [300, 50, 100],
                            backgroundColor: [
                            "#FF6384",
                            "#36A2EB",
                            "#FFCE56"
                            ],
                            hoverBackgroundColor: [
                            "#FF6384",
                            "#36A2EB",
                            "#FFCE56"
                            ]
                        }]
                    };

                    var ctx = document.getElementById("doughnut-graph").getContext("2d");
                    var DoughnutChart = new Chart(ctx, {
                        type: 'doughnut',
                        data: doughnutData,
                        responsive : true
                    });                    
                    
                    
                    
        </script>
  </body>
</html>

html5图表插件Chart.js用法

猜你喜欢