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 visual hóa JavaScript đơn giản nhất và có các loại biểu đồ tích hợp sau:

  • Biểu đồ điểm rơi (Scatter Plot)
  • Biểu đồ đường (Line Chart)
  • Biểu đồ thanh (Bar Chart)
  • Biểu đồ bánh (Pie Chart)
  • Biểu đồ donut (Donut Chart)
  • Biểu đồ bong bóng (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.

thứ nhất, thêm liên kết chỉ đế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>

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 bắt buộc phải có một id duy nhất.

đây là cách!

cú pháp biểu đồ điểm rơi典型的:

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

cú pháp biểu đồ đường典型的:

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

cú pháp biểu đồ thanh典型的:

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

đồ thị đ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", {
  type: "scatter",
  data: {
    datasets: [{
      pointRadius: 4,
      pointBackgroundColor: "rgba(0,0,255,1)",
      data: xyValues
    }]
  },
  options:{...}
});

Thử ngay

đồ thị đường thẳng

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", {
  type: "line",
  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 thì có thể vẽ đồ thị điểm để vẽ đồ thị đường thẳng:

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", {
  type: "line",
  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

hình đồ thị tuyến tính

mã nguồn

const xValues = [];
const yValues = [];
generateData("x * 2 + 7", 0, 10, 0.5);
new Chart("myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      fill: false,
      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

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

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

Thử ngay

hình trụ

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 thanh:

var barColors = ["blue"];

Thử ngay

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

var barColors ="red";

Thử ngay

màu sắc khác nhau về độ đậm nhạt:

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

hình trụ ngang

Chỉ cần thay đổi type từ "bar" thay đổi "horizontalBar":

type: "horizontalBar",

Thử ngay

đồ thị tròn

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

Đồ thị hình tròn

Chỉ cần thay đổi type từ "pie" thay đổi "doughnut":

type: "doughnut";

Thử ngay