Code mẫu JavaScript tạo biểu đồ/đồ thị hàm nối trục
- Thứ hai - 30/01/2023 22:03
- In ra
- Đóng cửa sổ này
JavaScript Spline Chart trong CanvasJS giống như biểu đồ đường/tuyến (Line Chart) ngoại trừ các điểm dữ liệu được kết nối bằng những đường cong mượt mà. Nó hữu ích khi bạn muốn hiện trơn tru đường thay đổi dần dần thay vì đột biến.
Dạng biểu đồ Spline Charts cũng được yêu thích bởi chúng đẹp mắt. Ví dụ bên dưới hiện mẫu biểu đồ dạng spline cùng mã nguồn JavaScript mà bạn có thể chỉnh sửa trong trình duyệt hoặc lưu về máy để chạy nội bộ.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text: "Doanh số bán album nhạc hàng năm"
},
axisY: {
title: "Số bản đã bán",
valueFormatString: "#0,,.",
suffix: "mn",
stripLines: [{
value: 3366500,
label: "Trung bình"
}]
},
data: [{
yValueFormatString: "#,### Units",
xValueFormatString: "YYYY",
type: "spline",
dataPoints: [
{x: new Date(2002, 0), y: 2506000},
{x: new Date(2003, 0), y: 2798000},
{x: new Date(2004, 0), y: 3386000},
{x: new Date(2005, 0), y: 6944000},
{x: new Date(2006, 0), y: 6026000},
{x: new Date(2007, 0), y: 2394000},
{x: new Date(2008, 0), y: 1872000},
{x: new Date(2009, 0), y: 2140000},
{x: new Date(2010, 0), y: 7289000},
{x: new Date(2011, 0), y: 4830000},
{x: new Date(2012, 0), y: 2009000},
{x: new Date(2013, 0), y: 2840000},
{x: new Date(2014, 0), y: 2396000},
{x: new Date(2015, 0), y: 1613000},
{x: new Date(2016, 0), y: 2821000},
{x: new Date(2017, 0), y: 2000000}
]
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
Nguồn: CanvasJS
Tùy biến biểu đồ
Đồ thị/Biểu đồ hàm nối trục Spline Chart có thể được tùy chỉnh bằng các lựa chọn khác nhau như:
lineThickness- độ dày đường thẳnglineColor- màu sắc của đường thẳngmarkerSize- kích thước đánh dấu
Bạn cũng có thể bật/tắt tính năng thu phóng bằng thuộc tính zoomEnabled.
Trên đây là cách tạo biểu đồ hàm nối trục - spline chart bằng JavaScript. Hi vọng bài viết hữu ích với các bạn.
