Biểu đồ cột đa chuỗi dữ liệu giúp trực quan hóa các nhóm dữ liệu theo phạm vi liên quan, chẳng hạn như giá trị cao và thấp. Những biểu đồ đa chuỗi dữ liệu rất hữu ích khi so sánh sự khác biệt giữa nhiều chuỗi dữ liệu.
Ví dụ bên dưới minh họa một biểu đồ cột đa dãy được tạo bằng JavaScript. Bạn sẽ có cả code nguồn để chỉnh sửa như ý muốn.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
exportEnabled: true,
title:{
text: "So sánh nhiệt độ giữa hai thành phố"
},
axisX: {
valueFormatString: "MMM"
},
axisY: {
suffix: " °C"
},
toolTip: {
shared: true
},
legend: {
cursor: "pointer",
itemclick: toggleDataSeries
},
data: [{
type: "rangeColumn",
name: "City 1",
showInLegend: true,
yValueFormatString: "#0.## °C",
xValueFormatString: "MMM, YYYY",
dataPoints: [
{ x: new Date(2016, 00), y: [08, 20] },
{ x: new Date(2016, 01), y: [10, 24] },
{ x: new Date(2016, 02), y: [16, 29] },
{ x: new Date(2016, 03), y: [21, 36] },
{ x: new Date(2016, 04), y: [26, 39] },
{ x: new Date(2016, 05), y: [22, 39] },
{ x: new Date(2016, 06), y: [20, 35] },
{ x: new Date(2016, 07), y: [20, 34] },
{ x: new Date(2016, 08), y: [20, 34] },
{ x: new Date(2016, 09), y: [19, 33] },
{ x: new Date(2016, 10), y: [13, 28] },
{ x: new Date(2016, 11), y: [09, 23] }
]
},
{
type: "rangeColumn",
name: "City 2",
showInLegend: true,
yValueFormatString: "#0.## °C",
xValueFormatString: "MMM, YYYY",
dataPoints: [
{ x: new Date(2016, 00), y: [16, 28] },
{ x: new Date(2016, 01), y: [18, 31] },
{ x: new Date(2016, 02), y: [20, 33] },
{ x: new Date(2016, 03), y: [22, 34] },
{ x: new Date(2016, 04), y: [22, 33] },
{ x: new Date(2016, 05), y: [20, 29] },
{ x: new Date(2016, 06), y: [20, 28] },
{ x: new Date(2016, 07), y: [20, 28] },
{ x: new Date(2016, 08), y: [20, 28] },
{ x: new Date(2016, 09), y: [20, 28] },
{ x: new Date(2016, 10), y: [14, 27] },
{ x: new Date(2016, 11), y: [11, 26] }
]
}]
});
chart.render();
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://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
Nguồn: CanvasJS
Tùy chỉnh biểu đồ
Tương tự như các biểu đồ được tạo bằng JavaScript, bạn có thể chỉnh sửa các thuộc tính liên quan để đạt được kết quả như ý muốn. Ví dụ:
showInLegend
: Hiện chú giảiverticalAlign
: Đặt chú giải theo chiều dọchorizontalAlign
: Đặt chú giải theo chiều ngangShared(toolTip)
: Chia sẻ tooltipcolor
: Màu sắclegendText
: Kiểu text chú giảifillOpacity
: Độ mờ- Và nhiều hơn thế nữa.
Source: https://quantrimang.com/hoc/code-mau-javascript-tao-bieu-do-cot-nhieu-chuoi-du-lieu-195709