Kết hợp biểu đồ hình nến với biểu đồ đường

Kandy parfume

Biểu đồ hình nến thường được kết hợp với dạng đường kẻ để hiện các tham số khác nhau trong phân tích tài chính. Bạn cũng có thể kết hợp biểu đồ dạng nến với đồ thị/biểu đồ dạng vùng, spline.

Ví dụ bên dưới hiện giá cổ phiếu của Facebook trong năm 2016 với thu nhập ròng và tổng doanh thu bằng cách kết hợp hai biểu đồ nến và đường kẻ. Bài viết cũng cung cấp mã nguồn JavaScript cho bạn chỉnh sửa trong trình duyệt hoặc lưu về máy để chạy nội bộ.

Biểu đồ JavaScript dạng nến kết hợp dạng đường

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	theme: "light2", // "light1", "light2", "dark1", "dark2"
	exportEnabled: true,
	title:{
		text: "Giá cổ phiếu của Facebook - 2016"
	},
	subtitles: [{
		text: "Tất cả giá cổ phiếu tính theo USD"
	}],
	axisX: {
		valueFormatString: "MMM"
	},
	axisY: {
		prefix: "$",
		title: "Giá"
	},
	axisY2: {
		prefix: "$",
		suffix: "bn",
		title: "Doanh thu & Thu nhập",
		tickLength: 0
	},
	toolTip: {
		shared: true
	},
	legend: {
		reversed: true,
		cursor: "pointer",
		itemclick: toggleDataSeries
	},     
	data: [{
		type: "candlestick",
		showInLegend: true,
		name: "Giá cổ phiếu",
		yValueFormatString: "$#,##0.00",
		xValueFormatString: "MMMM",
		dataPoints: [   // Y: [Mở, Cao ,Thấp, Đóng]
			{ x: new Date(2016, 0), y: [101.949997, 112.839996, 89.370003, 112.209999] },
			{ x: new Date(2016, 1), y: [112.269997, 117.589996, 96.820000, 106.919998] },
			{ x: new Date(2016, 2), y: [107.830002, 116.989998, 104.400002, 114.099998] },
			{ x: new Date(2016, 3), y: [113.750000, 120.790001, 106.309998, 117.580002] },
			{ x: new Date(2016, 4), y: [117.830002, 121.080002, 115.879997, 118.809998] },
			{ x: new Date(2016, 5), y: [118.500000, 119.440002, 108.230003, 114.279999] },
			{ x: new Date(2016, 6), y: [114.199997, 128.330002, 112.970001, 123.940002] },
			{ x: new Date(2016, 7), y: [123.849998, 126.730003, 122.070000, 126.120003] },
			{ x: new Date(2016, 8), y: [126.379997, 131.979996, 125.599998, 128.270004] },
			{ x: new Date(2016, 9), y: [128.380005, 133.500000, 126.750000, 130.990005] },
			{ x: new Date(2016, 10), y: [131.410004, 131.940002, 113.550003, 118.419998] },
			{ x: new Date(2016, 11), y: [118.379997, 122.500000, 114.000000, 115.050003] }
		]
	},
	{
		type: "line",
		showInLegend: true,
		name: "Thu nhập ròng",
		axisYType: "secondary",
		yValueFormatString: "$#,##0.00bn",
		xValueFormatString: "MMMM",
		dataPoints: [
			{ x: new Date(2016, 2), y: 1.510 },
			{ x: new Date(2016, 5), y: 2.055 },
			{ x: new Date(2016, 8), y: 2.379 },
			{ x: new Date(2016, 11), y: 3.568 }
		]
	},
	{
		type: "line",
		showInLegend: true,
		name: "Tổng doanh thu",
		axisYType: "secondary",
		yValueFormatString: "$#,##0.00bn",
		xValueFormatString: "MMMM",
		dataPoints: [
			{ x: new Date(2016, 2), y: 5.382 },
			{ x: new Date(2016, 5), y: 6.436 },
			{ x: new Date(2016, 8), y: 7.011 },
			{ x: new Date(2016, 11), y: 8.809 }
		]
	}]
});
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 type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

Nguồn: CanvasJS

Tùy biến biểu đồ

Bạn có thể dùng thuộc tính visible để hiện/ẩn chuỗi dữ liệu. Bạn cũng có thể tùy chỉnh màu sắc và độ dày của đường kẻ bằng lineColor và lineThickness. Những lựa chọn tùy chỉnh liên quan khác là color, risingColor…

Thứ Hai, 17/04/2023 14:54

5 ★ 1 👨 166

#JavaScript