Code JavaScript tạo đồ thị/biểu đồ OHLC

Kandy parfume

Biểu đồ OHLC được tạo bằng JavaScript tương tự như biểu đồ hình nến, ngoại trừ việc dấu tích ở bên trái & phải của đường thẳng đứng hiển thị giá mở & đóng. Bạn dễ dàng tùy chỉnh, tương tác, phản hồi, thậm chí thêm hiệu ứng động, thu phóng, xoay & xuất biểu đồ OHLC này dưới dạng ảnh.

Ví dụ bên dưới minh họa một mẫu đồ thị/biểu đồ OHLC được tạo bằng JavaScript kèm mã nguồn HTML 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ộ.

Mẫu biểu đồ OHLC được tạo bằng JavaScript

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

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	exportFileName: "Tesla-StockChart",	
	title:{
		text: "Giá cổ phiếu của Telsa - 2016"
	},
	axisX: {
		interval:1,
		intervalType: "month",
		valueFormatString: "MMM"
	},
	axisY: {
		prefix: "$",
		title: "Giá (USD)"
	},
	data: [{
		type: "ohlc",
		yValueFormatString: "$###0.00", 
		xValueFormatString: "MMM YYYY",
		dataPoints: [
			{ x: new Date(2016, 00, 01), y: [230.720001, 231.380005, 182.410004, 191.199997] },
			{ x: new Date(2016, 01, 01), y: [188.759995, 199.520004, 141.050003, 191.929993] },
			{ x: new Date(2016, 02, 01), y: [194.250000, 239.880005, 181.500000, 229.770004] },
			{ x: new Date(2016, 03, 01), y: [244.830002, 269.339996, 233.250000, 240.759995] },
			{ x: new Date(2016, 04, 01), y: [241.500000, 243.190002, 203.660004, 223.229996] },
			{ x: new Date(2016, 05, 01), y: [221.479996, 240.850006, 187.869995, 212.279999] },
			{ x: new Date(2016, 06, 01), y: [206.139999, 235.279999, 206.000000, 234.789993] },
			{ x: new Date(2016, 07, 01), y: [235.500000, 236.630005, 208.649994, 212.009995] },
			{ x: new Date(2016, 08, 01), y: [209.009995, 211.100006, 193.449997, 204.029999] },
			{ x: new Date(2016, 09, 01), y: [212.300003, 215.669998, 192.000000, 197.729996] },
			{ x: new Date(2016, 10, 01), y: [198.039993, 199.350006, 178.190002, 189.399994] },
			{ x: new Date(2016, 11, 01), y: [188.250000, 223.800003, 180.000000, 213.690002] }
		]
	}]
});
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