如何在 javascript 中创建带有自定义值和轴标签的自定义柱形折线图?
How to create a custom column line chart with custom value and axis labels in javascript?
我想知道是否可以使用像 highcharts, google charts, amcharts or d3js 这样的 javascript 库来创建如下图表:
正如您在图片中看到的,顶部有每列中绘制的 3 个值的摘要,因此需要在顶部有自定义轴标签,以便显示所有这些信息。
绘制的每个值还有一个矩形框,其中包含值(这是它的价格)、它的名称和它所属的 Segment。
您当然可以使用 ZingChart 创建此图表。 Here's my rendition of your chart。请务必单击 JavaScript 选项卡以查看图表 JSON 及其呈现方式。此外,在 HTML 选项卡上,请注意 ZingChart 有一个可用的 CDN,因此很容易开始使用该库。为了使它更容易,您可以单击右上角的 JSFiddle 按钮将所有内容复制到 JSFiddle,这样您就可以开始自己玩弄图表了。
由于此图表的复杂性,我不得不将其分解为多个 graphset
object。第一个 object 创建标题和副标题:
{
"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
中的下一个 object 创建列 headers 行,以及 "PRICES" 行标签:
{
"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"]
}
]
}
下一个 object 使用相机信息创建网格,使用 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-like,所以如果您熟悉 CSS 属性,那么您已经有了一个良好的开端。查看我们的 http://www.zingchart.com/docs,如果您有任何问题,请告诉我。
我想知道是否可以使用像 highcharts, google charts, amcharts or d3js 这样的 javascript 库来创建如下图表:
正如您在图片中看到的,顶部有每列中绘制的 3 个值的摘要,因此需要在顶部有自定义轴标签,以便显示所有这些信息。
绘制的每个值还有一个矩形框,其中包含值(这是它的价格)、它的名称和它所属的 Segment。
您当然可以使用 ZingChart 创建此图表。 Here's my rendition of your chart。请务必单击 JavaScript 选项卡以查看图表 JSON 及其呈现方式。此外,在 HTML 选项卡上,请注意 ZingChart 有一个可用的 CDN,因此很容易开始使用该库。为了使它更容易,您可以单击右上角的 JSFiddle 按钮将所有内容复制到 JSFiddle,这样您就可以开始自己玩弄图表了。
由于此图表的复杂性,我不得不将其分解为多个 graphset
object。第一个 object 创建标题和副标题:
{
"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
中的下一个 object 创建列 headers 行,以及 "PRICES" 行标签:
{
"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"]
}
]
}
下一个 object 使用相机信息创建网格,使用 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-like,所以如果您熟悉 CSS 属性,那么您已经有了一个良好的开端。查看我们的 http://www.zingchart.com/docs,如果您有任何问题,请告诉我。