Bạn chắc chắn có thể tạo biểu đồ này bằng cách sử dụng ZingChart. Here's my rendition of your chart. Hãy chắc chắn nhấp vào tab JavaScript để xem biểu đồ JSON và cách nó được hiển thị. Ngoài ra, trên tab HTML, hãy lưu ý rằng ZingChart có sẵn CDN, vì vậy thật dễ dàng để bắt đầu với thư viện. Để làm cho nó dễ dàng hơn, bạn có thể nhấp vào nút JSFiddle ở trên cùng bên phải để sao chép mọi thứ sang JSFiddle để bạn có thể bắt đầu chơi với chính biểu đồ đó.
Do tính phức tạp của biểu đồ này, tôi phải chia nhỏ số này thành một số đối tượng graphset. Đối tượng đầu tiên tạo ra các tiêu đề và phụ đề:
{
"type":null,
"x":0,
"y":0,
"height":36,
"width":"100%",
"background-color":"none",
"title":{
"text":"Prices for Camera Segment",
"height":20,
"background-color":"#000661"
},
"subtitle":{
"text":"Cameras",
"background-color":"#234979",
"color":"white",
"y":20,
"height":16
}
}
Đối tượng tiếp theo trong graphset tạo hàng tiêu đề cột, cũng như "GIÁ" nhãn hàng:
{
"type":"grid",
"x":0,
"y":36,
"height":100,
"width":"100%",
"background-color":"none",
"options":{
"header-row":false,
"col-widths":["10%","22.5%","22.5%","22.5%","22.5%"],
"style":{
".tr":{
"height":20,
"align":"center"
},
".td_1_0":{
"height":60
}
}
},
"series":[
{
"values":[
"Price (SAR)",
"Konica",
"Nikon",
"Canon",
"Konica"
]
},
{
"values":["PRICES"]
}
]
}
Đối tượng tiếp theo tạo lưới điện với thông tin máy ảnh, được đặt và có kích thước với các thuộc tính x, y, height và width để chồng chéo lưới trước đó, chỉ hiển thị nhãn hàng "PRICES":
{
"type":"grid",
"x":"10%",
"y":56,
"height":60,
"width":"90%",
"background-color":"none",
"options":{
"header-row":false,
"col-widths":[
"7%","11%","7%",
"7%","11%","7%",
"7%","11%","7%",
"7%","11%","7%"
],
"style":{
".td_1_0":{
"height":20
}
}
},
"series":[
{
"values":[
"USER",
"KM1",
"NA",
"USER",
"COOLPIX",
"200",
"USER",
"CM1",
"250",
"USER",
"KM1",
"150"
]
},
{
"values":[
"ENTRY",
"KM2",
"NA",
"ENTRY",
"D300",
"400",
"ENTRY",
"CM2",
"450",
"ENTRY",
"KM2",
"350"
]
},
{
"values":[
"PRO",
"KM3",
"NA",
"PRO",
"D1",
"1,200",
"PRO",
"CM3",
"1,250",
"PRO",
"KM3",
"1,150"
]
}
]
}
Cuối cùng, bảng xếp hạng chính nó là một biểu đồ phù hợp với các dấu hiệu một cách thích hợp theo kiểu và kích thước:
{
"type":"line",
"x":0,
"y":116,
"height":484,
"width":"100%",
"background-color":"white",
"plotarea":{
"margin-top":20,
"margin-left":"10%",
"margin-right":0
},
"plot":{
"value-box":{
"color":"black",
"text":"%data-level<br>%data-camera<br>%v",
"placement":"middle",
"font-weight":"none"
},
"marker":{
"type":"rectangle",
"height":40,
"width":120,
"background-color":"white",
"border-with":2,
"border-color":"black",
"line-style":"dotted"
},
"hover-marker":{
"visible":false
},
"hover-state":{
"visible":false
},
"tooltip":{
"visible":false
},
"line-color":"black",
"line-style":"dashed",
"line-width":2
},
"scale-y":{
"guide":{
"visible":false
},
"label":{
"text":"Price"
}
},
"scale-x":{
"markers":[
{
"type":"line",
"range":[0.5],
"line-width":2,
"line-color":"#F2F2F2"
},
{
"type":"line",
"range":[1.5],
"line-width":2,
"line-color":"#F2F2F2"
},
{
"type":"line",
"range":[2.5],
"line-width":2,
"line-color":"#F2F2F2"
}
],
"labels":["Konica", "Nikon","Canon","Konica"],
"guide":{
"visible":false
},
"offset-start":90,
"offset-end":90
},
"series":[
{
"values":[null, 200, 250, 150],
"data-level":"USER",
"data-camera":[null,"COOLPIX", "CM1", "KM1"]
},
{
"values":[null, 400, 450, 350],
"data-level":"ENTRY",
"data-camera":[null, "D300","CM2","KM2"]
},
{
"values":[null, 1200, 1250, 1150],
"data-level":"PRO",
"data-camera":[null, "D1","CM3","KM3"]
}
]
}
Bây giờ, fair play, tôi vào đội ZingChart và tôi đã và đang xây dựng bảng xếp hạng với các thư viện cho một lúc. Tuy nhiên, các thuộc tính tạo kiểu cho ZingChart rất giống CSS, vì vậy nếu bạn quen thuộc với các thuộc tính CSS, bạn đã có một khởi đầu. Hãy xem http://www.zingchart.com/docs của chúng tôi và cho tôi biết nếu bạn có bất kỳ câu hỏi nào.
wow điều này thật tuyệt vời, ZingChart có tương thích với IE8 không? –