Code JavaScript tạo biểu đồ/đồ thị kết hợp đường, vùng và cột
Bạn có thể tạo kết hợp bất kỳ biểu đồ có cùng hướng trục X và Y. Tạo kết hợp các biểu đồ/đồ thị khác nhau tương tự như thiết kế biểu đồ đa chuỗi. Bạn chỉ cần thêm chuỗi dữ liệu và xác định kiểu biểu đồ.
Ví dụ bên dưới minh họa mẫu biểu đồ kết hợp cột, đường và vùng được tạo bằng JavaScript. Nó cũng chứa mã nguồn 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,
theme: "light2",
title: {
text: "Dữ liệu doanh số hàng tháng"
},
axisX: {
valueFormatString: "MMM"
},
axisY: {
prefix: "$",
labelFormatter: addSymbols
},
toolTip: {
shared: true
},
legend: {
cursor: "pointer",
itemclick: toggleDataSeries
},
data: [
{
type: "column",
name: "Doanh số thực tế",
showInLegend: true,
xValueFormatString: "MMMM YYYY",
yValueFormatString: "$#,##0",
dataPoints: [
{ x: new Date(2016, 0), y: 20000 },
{ x: new Date(2016, 1), y: 30000 },
{ x: new Date(2016, 2), y: 25000 },
{ x: new Date(2016, 3), y: 70000, indexLabel: "Gia hạn cao" },
{ x: new Date(2016, 4), y: 50000 },
{ x: new Date(2016, 5), y: 35000 },
{ x: new Date(2016, 6), y: 30000 },
{ x: new Date(2016, 7), y: 43000 },
{ x: new Date(2016, 8), y: 35000 },
{ x: new Date(2016, 9), y: 30000},
{ x: new Date(2016, 10), y: 40000 },
{ x: new Date(2016, 11), y: 50000 }
]
},
{
type: "line",
name: "Doanh số mong đợi",
showInLegend: true,
yValueFormatString: "$#,##0",
dataPoints: [
{ x: new Date(2016, 0), y: 40000 },
{ x: new Date(2016, 1), y: 42000 },
{ x: new Date(2016, 2), y: 45000 },
{ x: new Date(2016, 3), y: 45000 },
{ x: new Date(2016, 4), y: 47000 },
{ x: new Date(2016, 5), y: 43000 },
{ x: new Date(2016, 6), y: 42000 },
{ x: new Date(2016, 7), y: 43000 },
{ x: new Date(2016, 8), y: 41000 },
{ x: new Date(2016, 9), y: 45000 },
{ x: new Date(2016, 10), y: 42000 },
{ x: new Date(2016, 11), y: 50000 }
]
},
{
type: "area",
name: "Lợi nhuận",
markerBorderColor: "white",
markerBorderThickness: 2,
showInLegend: true,
yValueFormatString: "$#,##0",
dataPoints: [
{ x: new Date(2016, 0), y: 5000 },
{ x: new Date(2016, 1), y: 7000 },
{ x: new Date(2016, 2), y: 6000},
{ x: new Date(2016, 3), y: 30000 },
{ x: new Date(2016, 4), y: 20000 },
{ x: new Date(2016, 5), y: 15000 },
{ x: new Date(2016, 6), y: 13000 },
{ x: new Date(2016, 7), y: 20000 },
{ x: new Date(2016, 8), y: 15000 },
{ x: new Date(2016, 9), y: 10000},
{ x: new Date(2016, 10), y: 19000 },
{ x: new Date(2016, 11), y: 22000 }
]
}]
});
chart.render();
function addSymbols(e) {
var suffixes = ["", "K", "M", "B"];
var order = Math.max(Math.floor(Math.log(Math.abs(e.value)) / Math.log(1000)), 0);
if(order > suffixes.length - 1)
order = suffixes.length - 1;
var suffix = suffixes[order];
return CanvasJS.formatNumber(e.value / Math.pow(1000, order)) + suffix;
}
function toggleDataSeries(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.chart.render();
}
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>
Nguồn: CanvasJS
Tùy biến biểu đồ
Bất kỳ số trong chuỗi dữ liệu đều có thể được vẽ ở biểu đồ bằng cách thêm mảng chuỗi data mới. Bạn cũng có thể bật chú thích trong các đồ thị đa chuỗi bằng cách mở showInLegend
.
Những lựa chọn tùy biến thông dụng khác là legendText
(nội dung chú thích), indexLabel
(nhãn chỉ mục), color
(màu sắc)…
712
Bạn nên đọc
-
Code JavaScript tạo biểu đồ đa chuỗi update dữ liệu trực tiếp
-
Code JavaScript tạo biểu đồ/đồ thị động
-
Code JavaScript tạo mẫu biểu đồ kết hợp OHLC và biểu đồ đường
-
Tổng hợp bài tập JavaScript có code mẫu
-
JavaScript là gì?
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
-
Code biểu đồ/đồ thị thanh kết hợp sai số
-
Code JavaScript tạo biểu đồ kết hợp giữa vùng và đường
-
Code JavaScript tạo mẫu biểu đồ Pareto với nhãn Index/Data
0 Bình luận
Sắp xếp theo

Xóa Đăng nhập để Gửi

Cũ vẫn chất
-
Cách thay đổi DNS Server trên Windows 11
Hôm qua -
Sleep hay shutdown: Lựa chọn nào tốt hơn cho PC của bạn?
Hôm qua -
Cách sửa lỗi BSOD Memory Management
Hôm qua 1 -
Microsoft ra mắt Windows 11 IoT Enterprise LTSC 2024 với khả năng hỗ trợ thiết bị rộng hơn và nhiều thay đổi lớn
Hôm qua -
40+ câu nói ‘xoắn lưỡi’ tiếng Việt, Anh, thách bạn có thể nói nhanh liên tiếp 5 lần mà vẫn trôi chảy
Hôm qua -
Code Tiếu Ngạo Gamota mới nhất đổi vàng khóa, đàn hương
Hôm qua -
Nhận xúc xắc Piggy Go mới nhất, Spin Piggy Go mới nhất
Hôm qua 3 -
6 cách tra cứu điểm thi vào lớp 10 Hà Nội 2025
Hôm qua -
Code Hầu Ca Đi Đâu Đấy mới nhất và cách nhập code
Hôm qua -
Cách chỉnh cấu hình trong Mini World Block Art
Hôm qua