Tạo biểu đồ không liên kết đơn giản với công cụ Chart Control trong ASP.NET Web Forms Controls

iworld.com.vn – Hướng dẫn tạo biểu đồ không liên kết đơn giản với công cụ Chart Control trong ASP.NET Web Forms Controls (Lesson 2 – Create A Simple Unbound Chart).

Bài viết này trình bày cách tạo biểu đồ Web tại thời điểm thiết kế trong Visual Studio với các chuỗi được tạo và điền theo cách thủ công.

Để tạo một biểu đồ không liên kết đơn giản, hãy làm như sau.

• Step 1. Tạo biểu đồ và thêm các chuỗi vào đó.
• Step 2.Tùy chỉnh Biểu đồ.

Bước 1. Tạo biểu đồ và thêm các chuỗi vào đó

Tạo Ứng dụng Web ASP.NET mới (Visual Studio 2012, 2013, 2015, 2017 hoặc 2019) hoặc mở một ứng dụng hiện có.

Từ tab hộp công cụ DX.21.1: Data & Analytics, thả  WebChartControl  vào biểu mẫu.

Để thêm một chuỗi mới vào biểu đồ, hãy nhấp vào thẻ thông minh của biểu đồ và chọn các chuỗi… (Series…) trong menu nhiệm vụ được hiện ra (WebChartControl Tasks).

Trong trình chỉnh sửa tập hợp các chuỗi (Series Collection Editor), nhấp vào thêm (Add…) .

Trong hộp thoại chọn dạng xem các chuỗi (Choose Series View), chỉ định kiểu xem (view type) của loạt chuỗi đang được tạo.

Lưu ý rằng loại chế độ xem của chuỗi hiển thị đầu tiên trong bộ sưu tập của biểu đồ xác định loại biểu đồ (diagram type) của nó.

Ví dụ: chuỗi Bar áp dụng kiểu Sơ đồ XY (XY-Diagram type.).

GHI CHÚ

Các loại chế độ xem có sẵn được liệt kê trong các chủ đề trợ giúp sau:

• Các loại biểu đồ 2D (2D Chart Types)
• Các loại biểu đồ 3D (3D Chart Types)

Công cụ điều khiển biểu đồ ASP.NET tự động phát hiện kiểu dữ liệu của các đối số chuỗi. Điều này có nghĩa là bạn không cần chỉ định thuộc tính SeriesBase.ArgumentScaleType trước khi cung cấp dữ liệu cho biểu đồ, vì nó được đặt thành tự động theo mặc định. Đảm bảo rằng giá trị mặc định của thuộc tính SeriesBase.ValueScaleType (Numerical) đáp ứng yêu cầu của bạn. Nếu không, bạn có thể cần phải chọn một loại tỷ lệ giá trị khác (ví dụ: loại đối số mặc định là số, nhưng bạn yêu cầu loại tỷ lệ định tính).

Bạn có thể đặt thuộc tính ValueScaleType trong tab thuộc tính (Properties).

Để thêm điểm vào chuỗi của bạn theo cách thủ công, hãy chuyển về tab điểm( Points). Mặc dù một số kiểu xem chuỗi có thể yêu cầu nhiều hơn một giá trị cho đối số của mỗi điểm (ví dụ: trong chuỗi Bubble hoặc  Stock), nhưng điều điển hình là một điểm chỉ có một đối số và cặp giá trị, tương ứng với tọa độ X và Y của điểm cùng các trục thích hợp axes.

Trong biểu đồ của mình, bạn có thể tạo nhiều các chuỗi khác nhau theo yêu cầu. Bạn cũng có thể kết hợp một loạt các loại chế độ xem khác nhau trong cùng một biểu đồ (nếu các loại chế độ xem tương thích). Ví dụ, thêm một chuỗi Spline vào chuỗi Bar hiện có.

Nhấp vào đóng (Close) để áp dụng các thay đổi và đóng hộp thoại. Biểu đồ của bạn hiện có hai chuỗi khác nhau được điền các điểm – như được minh họa trong hình ảnh bên dưới.

Bước 2. Tùy chỉnh biểu đồ

Tùy chỉnh chú giải

Theo mặc định, chú giải (legend) của biểu đồ được hiển thị ở góc trên cùng bên phải của biểu đồ. Để thay đổi vị trí của nó, trong cửa sổ thuộc tính, hãy mở rộng thuộc tính WebChartControl.Legend và đặt thuộc tính Legend.AlignmentHorizontal của nó thành thuộc tính Center, Legend.AlignmentVertical thành TopOutside và thuộc tính Legend.Direction thành LeftToRight.

Thêm một dòng không đổi

Để đánh dấu một giá trị trên bất kỳ trục nào, một đường không đổi (Constant Line) có thể được vẽ qua đó. Để thực hiện việc này, hãy mở rộng thuộc tính WebChartControl.Diagram, sau đó mở rộng thuộc tính XYDiagram.AxisY của nó trong cửa sổ Thuộc tính (Properties). Tiếp theo, nhấp vào nút dấu chấm lửng cho thuộc tính Axis2D.ConstantLines.

Trong hộp thoại Constant Line Collection Editor được mở, nhấp vào Thêm (Add) để tạo một dòng không đổi, chỉ định thuộc tính ConstantLine.AxisValue của nó và điều chỉnh các tùy chọn được đánh dấu trong hình ảnh bên dưới.

Kết quả được hiển thị trong hình ảnh sau đây.

Hiển thị các chuỗi ở các ngăn khác nhau.

Nhấp vào thẻ thông minh của biểu đồ để mở Trình chỉnh sửa tập hợp chuỗi (Series Collection Editor). Chọn chuỗi Spline và chuyển sang tab Thuộc tính (Properties) của hộp thoại. Sau đó, mở rộng thuộc tính SeriesBase.View, nhấp vào menu thả xuống của thuộc tính XYDiagramSeriesViewBase.Pane và chọn Ngăn mới (New Pane).

Đóng hộp thoại để xem kết quả.

Ngoài ra, bạn có thể điều chỉnh khả năng hiển thị của các trục trong ngăn và tạo các trục phụ (secondary axes).

Tùy chỉnh con trỏ Crosshair

Theo mặc định, con trỏ crosshair tự động được hiển thị trên điều khiển biểu đồ. Bạn có thể bật hoặc tắt con trỏ hình chữ thập ở cấp độ điều khiển biểu đồ với thuộc tính WebChartControl.CrosshairEnabled hoặc ở cấp độ nhóm biểu đồ thông qua thuộc tính SeriesBase.CrosshairEnabled.

Để thể hiện cách tiếp cận thứ hai, hãy tắt nhãn crosshair cho chuỗi Bar.

Nhấp vào thẻ thông minh của biểu đồ để mở trình chỉnh sửa tập hợp chuỗi (Series Collection Editor), chọn tab thuộc tính (Properties) cho Series1 và đặt thuộc tính SeriesBase.CrosshairEnabled thành false.

Chạy ứng dụng và đảm bảo rằng nhãn crosshair chỉ xuất hiện cho chuỗi Spline.

Tiếp theo, hiển thị các đường giá trị và nhãn của crosshair trên biểu đồ.

Định vị đối tượng CrosshairOptions trong thuộc tính Grid và đặt các thuộc tính CrosshairOptions.ShowValueLine, CrosshairOptions.ShowArgumentLabels và CrosshairOptions.ShowValueLabels của nó thành true, như được hiển thị bên dưới.

Chạy ứng dụng để xem kết quả.

Tìm hiểu thêm

• Lesson 3 – Bind Chart Series to Data (Liên kết chuỗi biểu đồ với dữ liệu ).

Biên dịch bởi Anh Đức – iworld.com.vn