gpt4 book ai didi

javascript - 如何在 javascript 中创建带有自定义值和轴标签的自定义柱形折线图?

转载 作者:数据小太阳 更新时间:2023-10-29 06:11:02 25 4
gpt4 key购买 nike

我想知道我是否可以使用像 highcharts 这样的 javascript 库, google charts , amchartsd3js创建如下图表:

enter image description here

正如您在图片中看到的,顶部有每列中绘制的 3 个值的摘要,因此需要在顶部有自定义轴标签,以便显示所有这些信息。 axis labels with custom info

并且绘制的每个值还有一个矩形框,其中包含值(这是它的价格)、它的名称和它所属的 Segment。 value boxes with custom info

最佳答案

您当然可以使用 ZingChart 创建此图表。 Here's my rendition of your chart .请务必单击 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"]
}
]
}

下一个对象使用相机信息创建网格,使用 xyheightwidth 放置和调整大小 属性,使其与之前的网格重叠,只留下“价格”行标签可见:

{
"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,如果您有任何问题,请告诉我。

关于javascript - 如何在 javascript 中创建带有自定义值和轴标签的自定义柱形折线图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31199013/

25 4 0