được tạo ở bước một và vẽ biểu đồ.
// set chart paddings
chart.padding(25, 50, 75, 50);
// set chart title
chart.title('GDP per capita (PPP) in 2006-2020, in USD');
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
Vậy là xong! Một sơ đồ bề mặt 3D chức năng cơ bản đã sẵn sàng!
Bạn có thể xem phiên bản cơ bản này của biểu đồ bề mặt 3D JavaScript trên Mã Bút hoặc kiểm tra mã ngay tại đây.
Tùy chỉnh Biểu đồ bề mặt JS
Một trong những phần tốt nhất khi sử dụng bất kỳ thư viện biểu đồ JS nào là bạn chỉ cần viết một lượng mã rất nhỏ để có được phiên bản biểu đồ hoạt động. Hơn nữa, hầu hết các thư viện đều cung cấp các tùy chọn để tùy chỉnh biểu đồ để làm cho biểu đồ trở nên cá nhân hóa và nhiều thông tin hơn.
Để tôi chỉ cho bạn cách cải thiện biểu đồ bề mặt JS 3D để làm cho nó trực quan hơn và đẹp hơn về mặt thẩm mỹ:
Bước 1 – Cải thiện giao diện của tất cả các trục
Có vẻ như đây là những thay đổi nhỏ, nhưng đây là những gì tôi sẽ làm trước tiên. Việc thay đổi giao diện của các trục làm cho biểu đồ trông đẹp hơn và dễ đọc hơn hẳn.
Sửa đổi các thiết lập cơ bản của các trục
Để nhấn mạnh hiệu ứng 3D của biểu đồ bề mặt, tôi sẽ xoay các trục và 15 và 45 độ tương ứng. Điều này có thể được thực hiện rất đơn giản bằng cách sử dụng chức năng xoay tích hợp.
Bây giờ tôi sẽ đặt giá trị lớn nhất và nhỏ nhất của trục y làm năm bắt đầu và năm kết thúc để làm cho biểu đồ trông sắc nét hơn.
// set y and z axes rotation chart.rotationY(15); chart.rotationZ(45); // set y scale minimum/maximum chart.yScale().minimum(2006); chart.yScale().maximum(2020);
Bây giờ tôi sẽ kích hoạt các vạch chia nhỏ cho và các trục để hiển thị nhiều vạch chia hơn và do đó có nhiều nhãn hơn. Để đồng nhất trong các vạch chia, tôi sẽ đặt khoảng thời gian thành một giá trị cố định cho và các trục.
// enable x and y axes minor ticks chart.xAxis().minorTicks().enabled(true); chart.xAxis().minorLabels().enabled(true); chart.yAxis().minorTicks().enabled(true); chart.yAxis().minorLabels().enabled(true); // set scales ticks intervals chart.yScale().ticks().interval(8); chart.zScale().ticks().interval(40000);
Sửa đổi nhãn của các trục
Để tránh chồng chéo với nhãn trục, tôi sẽ ẩn nhãn cuối cùng trên trục.
Tiếp theo, tôi sẽ giảm kích thước phông chữ của các nhãn và nhãn phụ (nhãn của các vạch phụ) của tất cả các trục.
// hide the last label in y axis chart.yAxis().drawLastLabel(false); // set x, y and z axes labels font size chart.xAxis().labels().fontSize(10); chart.xAxis().minorLabels().fontSize(10); chart.yAxis().labels().fontSize(10); chart.yAxis().minorLabels().fontSize(10); chart.zAxis().labels().fontSize(10);
Cuối cùng, trong phần sửa đổi nhãn, tôi sẽ xoay nhãn trục và nhãn phụ 90 độ để có giao diện gọn gàng hơn.
Tôi cũng cần phải thiết lập các nhãn trục phụ với dữ liệu đã tải tương tự như những gì tôi đã làm trước đó đối với các nhãn pháp tuyến trục x.
// set x axis labels rotation
chart.xAxis().labels().rotation(90);
chart.xAxis().minorLabels().rotation(90);
chart
.xAxis()
.minorLabels()
.format(function () {
return data.x[Math.round(this.value)];
});
Sửa đổi nét của trục
Theo mặc định, biểu đồ bề mặt sử dụng ba màu khác nhau để biểu thị 3 trục khác nhau. Nhưng tôi không cần điều đó cho biểu diễn của mình nên tôi sẽ thay đổi nét của tất cả các trục cùng với các vạch chia thành màu xám nhạt.
// set x, y and z axes stroke settings
chart.xAxis().stroke(null);
chart.xAxis().ticks().stroke("1 lightgray");
chart.xAxis().minorTicks().stroke("1 lightgray");
chart.yAxis().stroke(null);
chart.yAxis().ticks().stroke("1 lightgray");
chart.yAxis().minorTicks().stroke("1 lightgray");
chart.zAxis().stroke(null);
chart.zAxis().ticks().stroke("1 lightgray");
chart.zAxis().minorTicks().stroke("1 lightgray");
Hãy xem phiên bản này với tất cả các chi tiết làm đẹp của rìu trông như thế nào và bạn có thể chơi xung quanh với nó trên Mã Bút.
Bước 2 – Thêm bảng màu
Một cách chắc chắn để nâng cao sức hấp dẫn của biểu đồ là thêm bảng màu dựa trên dữ liệu bạn đang trình bày. Đây là một quá trình khá đơn giản, trong đó trước tiên tôi sẽ tạo thang màu tuyến tính với các màu mà tôi muốn rồi đặt thang màu đó cho biểu đồ.
Cùng với việc thêm màu sắc, tôi cũng sẽ thêm một chú thích cho biết màu nào biểu thị phạm vi giá trị nào và điều này có thể được thực hiện chỉ bằng một dòng mã.
// Create color scale
var customColorScale = anychart.scales.linearColor();
customColorScale.colors([
'#ffdd0e',
'#BCA600',
'#76A100',
'#1b8366',
'#007561'
]);
// Set color scale
chart.colorScale(customColorScale);
// enable and configure color range
chart.colorRange().enabled(true).orientation('right');
Bước 3 – Cải thiện chú giải công cụ
Khi bạn trình bày nhiều dữ liệu hơn, luôn là một ý tưởng hay khi có một chú giải công cụ hữu ích. Chú giải công cụ mặc định không thực sự cung cấp nhiều thông tin nên tôi sẽ tùy chỉnh nó để hiển thị giá trị của cả ba tham số của mỗi điểm được vẽ – quốc gia, năm và số liệu GDP.
// tooltip settings
chart
.tooltip()
.useHtml(true)
.titleFormat(function () {
return data.x[this.x];
})
.format(function () {
return "Year: " + this.y + "
" + "GDP:$ " + this.z.toFixed(2);
});
Bạn không nghĩ rằng chú giải công cụ đơn giản này sẽ tăng thêm nhiều giá trị cho biểu đồ sao? Hãy xem biểu đồ bề mặt 3D dựa trên JavaScript trông tuyệt vời và tùy chỉnh như thế nào và bạn có thể tìm thấy toàn bộ mã trên Mã Bút.
Phần kết luận
Thật tuyệt vời khi một biểu đồ bề mặt 3D phức tạp và thú vị như vậy có thể được xây dựng khá dễ dàng phải không? Với các thư viện JavaScript, bạn có thể nhanh chóng tạo một biểu đồ đơn giản, hoạt động và sau đó thêm nhiều tính năng tùy ý để điều chỉnh hình ảnh trực quan của mình.
Có rất nhiều loại hình trực quan hóa dữ liệu khác nhau có sẵn trong nhiều Biểu đồ JS thư viện và bạn có thể xem xét các tùy chọn loại biểu đồ có sẵn trong Bất kỳ biểu đồVí dụ.
Hãy hỏi bất kỳ câu hỏi nào, đưa ra gợi ý hoặc chỉ cần chào hỏi. Không có giới hạn nào cho việc cải thiện GDP của mọi quốc gia cũng như tạo ra hình ảnh trực quan tuyệt vời, vì vậy hãy bắt đầu tạo một số biểu đồ thú vị và bổ ích với bộ kỹ năng mới học này!
