Chart.js

Chart.js là thư viện JavaScript miễn phí để tạo biểu đồ dựa trên HTML.

Nó là một trong những thư viện visualization JavaScript đơn giản nhất, và có các loại biểu đồ tích hợp sau:

  • Scatter Plot
  • Line Chart
  • Bar Chart
  • Pie Chart
  • Donut Chart
  • Bubble Chart
  • Biểu đồ diện tích (Area Chart)
  • Biểu đồ radar (Radar Chart)
  • Biểu đồ hỗn hợp (Mixed Chart)

Làm thế nào để sử dụng Chart.js?

Chart.js rất dễ sử dụng.

Trước tiên, thêm liên kết đến CDN (Mạng phân phối nội dung):

<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
</script>

Sau đó, thêm thẻ <canvas> vào vị trí cần vẽ biểu đồ:

<canvas id="myChart" style="width:100%;max-width:700px"></canvas>

Thẻ canvas phải có một id duy nhất.

Đây là cách đó!

Cú pháp biểu đồ điểm tiêu chuẩn:

const myChart = new Chart("myChart", {
  
  data: {}
  options: {}
});

Cú pháp biểu đồ折 line tiêu chuẩn:

const myChart = new Chart("myChart", {
  
  data: {}
  options: {}
});

Cú pháp biểu đồ thang hình tiêu chuẩn:

const myChart = new Chart("myChart", {
  type: "bar",
  data: {}
  options: {}
});

Biểu đồ điểm

Giá nhà vs. Diện tích

Mã nguồn

const xyValues = [
  {x:50, y:7},
  {x:60, y:8},
  {x:70, y:8},
  {x:80, y:9},
  {x:90, y:9},
  {x:100, y:9},
  {x:110, y:10},
  {x:120, y:11},
  {x:130, y:14},
  {x:140, y:14},
  {x:150, y:15}
];
new Chart("myChart", {
  
  data: {
    datasets: [{
      pointRadius: 4,
      pointBackgroundColor: "rgba(0,0,255,1)",
      data: xyValues
    }]
  },
  options:{...}
});

Thử ngay

Biểu đồ折 line

Giá nhà vs. Diện tích

Mã nguồn

const xValues = [50,60,70,80,90,100,110,120,130,140,150];
const yValues = [7,8,8,9,9,9,10,11,14,14,15];
new Chart("myChart", {
  
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor:"rgba(0,0,255,1.0)",
      borderColor: "rgba(0,0,255,0.1)",
      data: yValues
    }]
  },
  options:{...}
});

Thử ngay

Nếu đặt borderColor thành: 0nếu vậy có thể vẽ biểu đồ折线 theo điểm:

borderColor: "rgba(0,0,0,0)",

Thử ngay

đa dòng

Mã nguồn

const xValues = [100,200,300,400,500,600,700,800,900,1000];
new Chart("myChart", {
  
  data: {
    labels: xValues,
    datasets: [{
      data: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478],
      borderColor: "red",
      fill: false
    },{
      data: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000],
      borderColor: "green",
      fill: false
    },{
      data: [300,700,2000,5000,6000,4000,2000,1000,200,100],
      borderColor: "blue",
      fill: false
    }]
  },
  options: {
    legend: {display: false}
  }
});

Thử ngay

Biểu đồ đường

Mã nguồn

const xValues = [];
const yValues = [];
generateData("x * 2 + 7", 0, 10, 0.5);
new Chart("myChart", {
  
  data: {
    labels: xValues,
    datasets: [{
      
      pointRadius: 1,
      borderColor: "rgba(255,0,0,0.5)",
      data: yValues
    }]
  },
  options: {...}
});
function generateData(value, i1, i2, step = 1) {
  for (let x = i1; x <= i2; x += step) {
    yValues.push(eval(value));
    xValues.push(x);
  }
}

Thử ngay

Biểu đồ hàm

Tương tự như biểu đồ đường. Chỉ cần thay đổi tham số generateData:

generateData("Math.sin(x)", 0, 10, 0.5);

Thử ngay

Hình ảnh thanh

Mã nguồn

var xValues = ["Ý", "Pháp", "Tây Ban Nha", "Mỹ", "Argentina"];
var yValues = [55, 49, 44, 24, 15];
var barColors = ["red", "green","blue","orange","brown"];
new Chart("myChart", {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {...}
});

Thử ngay

Chỉ sơn một cột:

var barColors = ["blue"];

Thử ngay

Tất cả các cột chỉ có một màu:

var barColors ="red";

Thử ngay

màu sắc với độ đậm nhạt khác nhau：

var barColors = [
  "rgba(0,0,255,1.0)",
  "rgba(0,0,255,0.8)",
  "rgba(0,0,255,0.6)",
  "rgba(0,0,255,0.4)",
  "rgba(0,0,255,0.2)",
];

Thử ngay

Biểu đồ thanh ngang

chỉ cần thay đổi type từ "bar" thay đổi "horizontalBar"：

type: "horizontalBar",

Thử ngay

bánh

thực thể

new Chart("myChart", {
  type: "pie",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {
    title: {
      display: true,
      text: "Sản xuất rượu vang toàn cầu"
    }
  }
});

Thử ngay

Bảng đồ bánh

chỉ cần thay đổi type từ "pie" thay đổi "doughnut"：

type: "doughnut";

Thử ngay