我想知道是否可以使用一些 JavaScript 库,如highcharts、google charts、amcharts或d3js来创建如下图表:
正如您在图像中看到的,顶部有每列中绘制的 3 个值的摘要,因此需要在顶部有自定义轴标签,可以显示所有这些信息。
并且绘制的每个值还有一个矩形框,其中包含值(即价格)、名称和所属的段。
我想知道是否可以使用一些 JavaScript 库,如highcharts、google charts、amcharts或d3js来创建如下图表:
正如您在图像中看到的,顶部有每列中绘制的 3 个值的摘要,因此需要在顶部有自定义轴标签,可以显示所有这些信息。
并且绘制的每个值还有一个矩形框,其中包含值(即价格)、名称和所属的段。
您当然可以使用 ZingChart 创建此图表。这是我对你图表的演绎。请务必单击 JavaScript 选项卡以查看图表 JSON 及其呈现方式。此外,在 HTML 选项卡上,请注意 ZingChart 有一个可用的 CDN,因此很容易开始使用该库。为了使它更容易,您可以单击右上角的 JSFiddle 按钮将所有内容复制到 JSFiddle,以便您可以自己开始使用图表。
由于此图表的复杂性,我不得不将其分解为多个graphset
对象。第一个对象创建标题和副标题:
{
"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
}
}
中的下一个对象graphset
创建列标题行,以及“价格”行标签:
{
"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"]
}
]
}
x
下一个对象使用相机信息创建网格,使用、y
、height
和属性放置和调整大小width
,使其与前一个网格重叠,只留下“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"
]
}
]
}
最后,图表本身是一个折线图,标记的样式和大小都合适:
{
"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"]
}
]
}
现在,公平竞争,我是 ZingChart 团队的一员,我一直在使用图书馆构建图表一段时间。但是,ZingChart 的样式属性非常类似于 CSS,所以如果您熟悉 CSS 属性,那么您已经抢占了先机。查看我们的 http://www.zingchart.com/docs,如果您有任何问题,请告诉我。