Lập trình PHP

Biểu đồ Ví dụ biểu đồ thanh JS – PHP

Posted on by Mss. Bình

Trong hướng dẫn này, chúng ta sẽ xem các ví dụ về cách sử dụng thư viện Chartjs JavaScript để tạo biểu đồ thanh.

Ví dụ nhanh này cung cấp cho bạn mã để hiển thị biểu đồ thanh đơn giản trên trình duyệt.

Mã JavaScript dưới đây cho biết cách bao gồm và khởi tạo thư viện ChartJS. Nó sử dụng dữ liệu tĩnh để đặt nhãn biểu đồ thanh và tập dữ liệu trong JavaScript.

Ví dụ nhanh – Ví dụ biểu đồ thanh đơn giản qua ChartJS

<!DOCTYPE html>
<html>
<head>
<title>Chart JS Bar Chart Example</title>
<link rel="stylesheet" href=" type="text/css" />
</head>
<body>
    <div class="PHP-container">
        <h1>Chart JS Bar Chart Example</h1>
        <div>
            <canvas id="bar-chart"></canvas>
        </div>
    </div>
    <script
        src="
    <script>
		// Bar chart
		new Chart(document.getElementById("bar-chart"), {
			type: 'bar',
			data: {
				labels: ["Elephant", "Horse", "Tiger", "Lion", "Jaguar"],
				datasets: [
					{
						label: "Animals Count",
						backgroundColor: ["#51EAEA", "#FCDDB0",
							"#FF9D76", "#FB3569", "#82CD47"],
						data: [478, 267, 829, 1732, 1213]
					}
				]
			},
			options: {
				legend: { display: false },
				title: {
					display: true,
					text: 'Chart JS Bar Chart Example'
				}
			}
		});
	</script>
</body>
</html>

Đầu ra:

Ví dụ này đặt tham số biểu đồ cho ChartJS dữ liệu và tùy chọn mảng và hiển thị thanh trò chuyện sau lên trình duyệt.

Đây là một giải pháp phía máy khách rất dễ dàng để hiển thị biểu diễn đồ họa chuyên nghiệp dưới dạng biểu đồ thanh.

Bạn chỉ có thể sử dụng mã này trong dự án của mình bằng cách điều chỉnh các điểm dữ liệu một chút.

Ví dụ 2: Biểu đồ thanh ngang

Thư viện này hỗ trợ tạo cả biểu đồ thanh dọc và ngang. Tuy nhiên, mặc định là biểu đồ thanh dọc.

Trong ví dụ này, nó tạo biểu đồ thanh ngang bằng plugin ChartJS.

Đối với biểu đồ thanh dọc hoặc ngang, hướng phụ thuộc vào chỉ mụcTrục quyền mua.

Ví dụ này đặt indexAxis=’y’ để hiển thị các thanh theo chiều ngang.

<!DOCTYPE html>
<html>
<head>
<title>Chart JS Horizontal Bar Chart Example</title>
<link rel="stylesheet" href=" type="text/css" />
</head>
<body>
    <div class="PHP-container">
        <h1>Chart JS Horizontal Bar Chart Example</h1>
        <div>
            <canvas id="horizontal-bar-chart"></canvas>
        </div>
    </div>
    <script
        src="
    <script>
        new Chart(document.getElementById("horizontal-bar-chart"), {
            type: 'bar',
            data: {
                labels: ["Elephant", "Horse", "Tiger", "Lion", "Jaguar"],
                datasets: [{
                    label: "Animals count",
                    backgroundColor: ["#51EAEA", "#FCDDB0",
                        "#FF9D76", "#FB3569", "#82CD47"
                    ],
                    data: [478, 267, 829, 1732, 1213]
                }]
            },
            options: {
                indexAxis: 'y',
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    text: 'Chart JS Horizontal Bar Chart Example'
                }
            }
        });
    </script>
</body>
</html>

Đầu ra:

Ảnh chụp màn hình đầu ra này vẽ chỉ mục dữ liệu biểu đồ thanh trên trục ‘y’ và có số đọc trên ‘trục x’.

Trước đây, chúng tôi đã sử dụng thư viện JS này để tạo biểu đồ hình tròn bằng thư viện ChartJS này. Tuy nhiên, nó không hỗ trợ hiển thị biểu đồ hình tròn 3D. Xem bài viết được liên kết sử dụng biểu đồ Google để tạo biểu đồ hình tròn 3D.

Ví dụ 3: Biểu đồ thanh được nhóm

Biểu đồ thanh được nhóm rất hữu ích để hiển thị cách đọc so sánh.

<!DOCTYPE html>
<html>
<head>
<title>Chart JS Grouped Bar Chart Example</title>
<link rel="stylesheet" href=" type="text/css" />
</head>
<body>
    <div class="PHP-container">
        <h1>Chart JS Grouped Bar Chart Example</h1>
        <div>
            <canvas id="bar-chart"></canvas>
        </div>
    </div>
    <script
        src="
    <script>
        new Chart(document.getElementById("bar-chart"), {
        	type: 'bar',
        	data: {
        		labels: ["900", "950", "999", "1050"],
        		datasets: [{
        			label: "Lion",
        			backgroundColor: "#FF9D76",
        			data: [234, 345, 567, 568]
        		}, {
        			label: "Tiger",
        			backgroundColor: "#51EAEA",
        			data: [233, 566, 234, 766]
        		}]
        	},
        	options: {
        		legend: {
        			display: false
        		},
        		title: {
        			display: true,
        			text: 'Chart JS Grouped Bar Chart Example'
        		}
        	}
        });
    </script>
</body>
</html>

Đầu ra:

Nó hiển thị bản ghi về số lượng của hai con vật tại một điểm cụ thể. Điều này sẽ giúp so sánh các bài đọc của hai hoặc nhiều chỉ mục.

Biểu đồJS loại tham số

ChartJS là một thư viện JS đáng tin cậy để tạo và hiển thị biểu đồ trên trang web.

Trong hướng dẫn trước, chúng ta đã biết cách tạo biểu đồ đường bằng thư viện ChartJS này.

Ngoài ra, nó hỗ trợ tạo nhiều loại biểu đồ hơn. Các loại tham số được sử dụng để xác định loại biểu đồ.

Tập dữ liệu và định nghĩa tùy chọn có thể khác nhau dựa trên loại biểu đồ.
Tải xuống

↑ Quay lại Đầu trang


Xem thêm tin mới và bổ ích tại:

– Kiến thức gia đình

– Tri thức đời sống

– Kênh youtube Kiến thức gia đình

Trả lời