Để thêm vào @ câu trả lời tuyệt vời của Ricardo, tôi cũng đã làm một cái gì đó rất giống nhau. Trong thực tế, tôi sẽ không sai nếu tôi nói rằng tôi đã đi một bước xa hơn này. Do đó, muốn chia sẻ cách tiếp cận này.
Tôi đã tạo một trình bao bọc trên thư viện highchart. Điều này cho phép nhiều lợi ích, sau là những ưu điểm chính khuyến khích đi theo con đường này
- tách: tách riêng mã của bạn từ highcharts
Nâng cấp
- dễ dàng: wrapper Đây sẽ là mã duy nhất mà sẽ yêu cầu sửa đổi trong trường hợp có bất kỳ thay đổi đột phá nào trong apch highchart sau khi nâng cấp hoặc thậm chí nếu bạn quyết định chuyển sang thư viện biểu đồ differnt (thậm chí từ highchart đến highstock có thể đầy đủ nếu ứng dụng của bạn sử dụng biểu đồ rộng rãi)
- Dễ sử dụng: api bao bọc được giữ rất đơn giản, chỉ những thứ có thể thay đổi được hiển thị dưới dạng tùy chọn (Điều đó cũng có giá trị không phải là đối tượng js sâu như HC đã có, chủ yếu là 1 cấp độ sâu), mỗi giá trị mặc định.Vì vậy, hầu hết thời gian tạo biểu đồ của chúng tôi là rất ngắn, với các nhà xây dựng lấy 1
options đối tượng với chỉ 4-5 thuộc tính có giá trị mặc định không phù hợp với biểu đồ dưới tạo
- Phù UX: nhìn Phù & cảm thấy trên ứng dụng . ví dụ: định dạng đầu công cụ & vị trí, màu sắc, họ phông chữ, màu sắc, nút thanh công cụ (xuất), v.v.
- Tránh trùng lặp: Tất nhiên là câu trả lời hợp lệ của câu hỏi được hỏi phải tránh trùng lặp và thực hiện một mức độ lớn
Dưới đây là những gì các options trông giống như với các giá trị mặc định của họ
defaults : {
chartType : "line",
startTime : 0,
interval : 1000,
chartData : [],
title : "Product Name",
navigator : true,
legends : true,
presetTimeRanges : [],
primaryToolbarButtons : true,
secondaryToolbarButtons : true,
zoomX : true,
zoomY : false,
height : null,
width : null,
panning : false,
reflow : false,
yDecimals : 2,
container : "container",
allowFullScreen : true,
credits : false,
showAll : false,
fontSize : "normal", // other option available is "small"
showBtnsInNewTab : false,
xAxisTitle : null,
yAxisTitle : null,
onLoad : null,
pointMarkers : false,
categories : []
}
như bạn có thể thấy, hầu hết các lần, chỉ chartData rằng những thay đổi của nó. Thậm chí nếu bạn cần thiết lập một số thuộc tính, chủ yếu là các loại true/false, không giống như kinh dị mà hàm tạo highchart mong đợi (không phê bình chúng, số lượng tùy chọn mà chúng cung cấp chỉ là tuyệt vời từ điểm tùy chỉnh, nhưng đối với mọi nhà phát triển nhóm nghiên cứu để hiểu & chủ nó có thể mất một thời gian)
vì vậy, tạo ra các biểu đồ đơn giản như
var chart=new myLib.Chart({
chartData : [[1000000,1],[2000000,2],[3000000,1],[4000000,5]]
});
Chính xác thì vấn đề là gì? Sao chép mã ở đâu? Cung cấp mã của bạn. – NT3RP