Code JavaScript tạo biểu đồ kết hợp giữa vùng và đường

javascript range line 7 size 300x0 znd

Bạn có thể kết hợp biểu đồ vùng và đường giống như thêm các chuỗi dữ liệu khác. Những biểu đồ này có tính tương tác, phản hồi, hỗ trợ hiệu ứng động & xuất ảnh.

Ví dụ bên dưới minh họa biến thiên nhiệt độ hàng ngày cùng với giá trị trung bình của nó bằng cách kết hợp biểu đồ vùng theo phạm vi và đường được tạo bằng JavaScript. Bài viết cũng cung cấp code nguồn cho bạn chỉnh sửa trong trình duyệt hoặc lưu về máy để chạy nội bộ.

Code JavaScript tạo biểu đồ kết hợp giữa vùng và đường

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
	theme: "light2",
	title: {
		text: "Biến thiên nhiệt độ hàng ngày ở Bengaluru - 7/2017"
	},
	axisX: {
		valueFormatString: "DD MMM"
	},
	axisY: {
		title: "Nhiệt độ (°C)",
		includeZero: true
	},
	toolTip: {
		shared: true
	},
	legend: {
		dockInsidePlotArea: true,
		cursor: "pointer",
		itemclick: toggleDataSeries
	},
	data: [{
		type: "rangeArea",
		markerSize: 0,
		name: "Phạm vi nhiêt độ",
		showInLegend: true,
		toolTipContent: "{x}<br><span style=\"color:#6D77AC\">{name}</span><br>Nhỏ nhất: {y[1]} °C<br>Cao nhất: {y[0]} °C",
		dataPoints: [
			{ x: new Date(2017, 6, 1), y: [30, 19] },
			{ x: new Date(2017, 6, 2), y: [30, 21] },
			{ x: new Date(2017, 6, 3), y: [29, 21] },
			{ x: new Date(2017, 6, 4), y: [28, 20] },
			{ x: new Date(2017, 6, 5), y: [29, 20] },
			{ x: new Date(2017, 6, 6), y: [29, 20] },
			{ x: new Date(2017, 6, 7), y: [27, 21] },
			{ x: new Date(2017, 6, 8), y: [26, 20] },
			{ x: new Date(2017, 6, 9), y: [30, 20] },
			{ x: new Date(2017, 6, 10), y: [30, 21] },
			{ x: new Date(2017, 6, 11), y: [30, 21] },
			{ x: new Date(2017, 6, 12),y: [29, 21] },
			{ x: new Date(2017, 6, 13),y: [27, 20] },
			{ x: new Date(2017, 6, 14),y: [27, 20] },
			{ x: new Date(2017, 6, 15),y: [25, 20] },
			{ x: new Date(2017, 6, 16),y: [29, 20] },
			{ x: new Date(2017, 6, 17),y: [28, 20] },
			{ x: new Date(2017, 6, 18),y: [27, 21] },
			{ x: new Date(2017, 6, 19),y: [27, 21] },
			{ x: new Date(2017, 6, 20),y: [29, 21] },
			{ x: new Date(2017, 6, 21),y: [29, 20] },
			{ x: new Date(2017, 6, 22),y: [31, 20] },
			{ x: new Date(2017, 6, 23),y: [30, 21] },
			{ x: new Date(2017, 6, 24),y: [30, 20] },
			{ x: new Date(2017, 6, 25),y: [31, 21] },
			{ x: new Date(2017, 6, 26),y: [30, 21] },
			{ x: new Date(2017, 6, 27),y: [31, 21] },
			{ x: new Date(2017, 6, 28),y: [31, 21] },
			{ x: new Date(2017, 6, 29),y: [31, 21] },
			{ x: new Date(2017, 6, 30), y: [31, 21] },
			{ x: new Date(2017, 6, 31), y: [31, 22] }
		]
	}]
});
chart.render();

addAverages();

function addAverages() {
	var dps = [];
	for(var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
		dps.push({
			x: chart.options.data[0].dataPoints[i].x,
			y: (chart.options.data[0].dataPoints[i].y[0] + chart.options.data[0].dataPoints[i].y[1]) / 2
		});
	}
	chart.options.data.push({
		type: "line",
		name: "Trung bình",
		showInLegend: true,
		markerType: "triangle",
		markerSize: 0,
		yValueFormatString: "##.0 °C",
		dataPoints: dps
	});
	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://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *