Lập trình PHP

Biểu đồ JS Pie Chart Ví dụ – PHP

Posted on by Mss. Bình

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách tạo biểu đồ hình tròn bằng thư viện JavaScript. Chúng tôi đã sử dụng thư viện Chart.js để tạo biểu đồ hình tròn. Là một tùy chọn thay thế, tôi cũng đã trình bày một ví dụ về biểu đồ hình tròn 3d bằng thư viện biểu đồ của Google.

Chúng ta hãy xem các ví dụ sau về cách tạo biểu đồ hình tròn bằng JavaScript.

  • Ví dụ nhanh – Ví dụ biểu đồ hình tròn đơn giản qua ChartJS.
  • Biểu đồ hình tròn 3D với thư viện Google Charts.
  • Biểu đồ hình tròn ChartJS đáp ứng.

Ví dụ nhanh – Ví dụ biểu đồ hình tròn đơn giản qua ChartJS

<!DOCTYPE html>
<html>
<head>
<title>Chart JS Pie Chart</title>
<link rel="stylesheet" href=" type="text/css" />
</head>
<body>
    <div class="PHP-container">
        <h1>Responsive Pie Chart</h1>
        <div>
            <canvas id="pie-chart"></canvas>
        </div>
    </div>
    <script
        src="
    <script>
        new Chart(document.getElementById("pie-chart"), {
        	type : 'pie',
        	data : {
        		labels : [ "Lion", "Horse", "Elephant", "Tiger",
        				"Jaguar" ],
        		datasets : [ {
        			backgroundColor : [ "#51EAEA", "#FCDDB0",
        					"#FF9D76", "#FB3569", "#82CD47" ],
        			data : [ 418, 263, 434, 586, 332 ]
        		} ]
        	},
        	options : {
        		title : {
        			display : true,
        			text : 'Chart JS Pie Chart Example'
        		}
        	}
        });
	</script>
</body>
</html>

Tạo biểu đồ hình tròn ChartJS là một quy trình gồm ba bước như hình bên dưới.

  1. Thêm thư viện ChartJS bao gồm vào phần đầu của HTML của bạn.
  2. Thêm phần tử canvas vào HTML.
  3. Thêm script khởi tạo và gọi lớp ChartJS trước khi đóng thẻ body HTML.

Giới thiệu về tập lệnh biểu đồ hình tròn ChartJS

Tập lệnh đặt các thuộc tính sau để khởi tạo thư viện ChartJS.

  • loại hình – Loại biểu đồ được thư viện ChartJS hỗ trợ.
  • dữ liệu – Nó đặt nhãn biểu đồ và bộ dữ liệu. Tập dữ liệu chứa mảng dữ liệu và các thuộc tính hiển thị.
  • tùy chọn – Nó đặt văn bản tiêu đề biểu đồ và cờ hiển thị của nó là giá trị boolean true để hiển thị nó trên trình duyệt.

Đầu ra:

biểu đồ hình tròn chartjs

Trong hướng dẫn trước, chúng ta đã thấy nhiều cách khác nhau để tạo biểu đồ đường bằng thư viện Chart JS.

Xem bản trình diễn

Tạo biểu đồ hình tròn 3D

Không có tùy chọn nào cho biểu đồ hình tròn 3D sử dụng biểu đồ JS. Đối với những người dùng đã đến đây để tìm biểu đồ hình tròn 3D, bạn có thể dùng thử Google Charts.

Ví dụ này sử dụng Google Charts để tạo biểu đồ hình tròn 3D cho trang web. Trong mã trước, chúng tôi sử dụng Google Charts để hiển thị biểu đồ thanh để hiển thị số liệu thống kê chuyên cần của học sinh.

Mã JavaScript của Google Charts chuẩn bị mảng dữ liệu phân bố động vật. Mảng này là để gửi nó đến bảng dữ liệu biểu đồ giúp vẽ biểu đồ hình tròn.

Thư viện Google Charts chấp nhận is3D với một phép toán thật để xuất biểu đồ hình tròn 3D.

Nó tạo một đối tượng trực quan hóa biểu đồ với tham chiếu liên quan đến mục tiêu phần tử giao diện người dùng. Sau đó, nó gọi chức năng thư viện Google Charts để vẽ và hiển thị biểu đồ.

<!DOCTYPE html>
<html>
<head>
<title>3d Pie Chart JavaScript with Google Charts</title>
<link rel="stylesheet" href=" type="text/css" />

<script type="text/javascript"
    src="
<script type="text/javascript">
	google.charts.load("current", {
		packages : [ "corechart" ]
	});
	google.charts.setOnLoadCallback(drawChart);
	function drawChart() {
		var data = google.visualization.arrayToDataTable([
				[ 'Animal', 'Distribution' ], [ 'Horse', 11 ],
				[ 'Elephant', 2 ], [ 'Tiger', 2 ], [ 'Lion', 2 ],
				[ 'Jaguar', 7 ] ]);

		var options = {
			title : '3d Pie Chart JavaScript with Google Charts',
			is3D : true,
		};

		var chart = new google.visualization.PieChart(document
				.getElementById('3d-pie-chart'));
		chart.draw(data, options);
	}
</script>
</head>
<body>
    <div class="PHP-container">
        <h1>3d Pie Chart JavaScript with Google Charts</h1>
        <div id="3d-pie-chart" style="width: 700px; height: 500px;"></div>
    </div>
</body>
</html>

biểu đồ hình tròn 3d

Biểu đồ hình tròn đáp ứng bằng Chart JS

Thư viện Chart JS cung cấp các tùy chọn JavaScript để làm cho biểu đồ hình tròn đầu ra phản hồi nhanh.

Tập lệnh mẫu này sử dụng các tùy chọn đó để hiển thị biểu đồ hình tròn đáp ứng trong trình duyệt.

Mã JavaScript để hiển thị biểu đồ hình tròn đáp ứng giống như chúng ta đã thấy trong ví dụ nhanh ở trên.

Sự khác biệt không có gì ngoài việc thiết lập đáp ứng: đúng trong ChartJS tùy chọn đặc tính.

Nếu bạn muốn tạo biểu đồ phản hồi bằng Google Charts, thì bài viết được liên kết có một ví dụ.

<!DOCTYPE html>
<html>
<head>
<title>Responsive Pie Chart</title>
<link rel="stylesheet" href=" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class="PHP-container">
        <h1>Responsive Pie Chart</h1>
        <div>
            <canvas id="pie-chart"></canvas>
        </div>
    </div>
    <script
        src="
    <script>
		new Chart(document.getElementById("pie-chart"), {
			type : 'pie',
			data : {
				labels : [ "Lion", "Horse", "Elephant", "Tiger",
						"Jaguar" ],
				datasets : [ {
					backgroundColor : [ "#51EAEA", "#FCDDB0",
							"#FF9D76", "#FB3569", "#82CD47" ],
					data : [ 418, 263, 434, 586, 332 ]
				} ]
			},
			options : {
				title : {
					display : true,
					text : 'Responsive Pie Chart'
				},
				responsive : true
			}
		});
	</script>
</body>
</html>

Xem DemoTải về

↑ 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