4
Я пытаюсь воссоздать следующую с ZingChart: 
Можно ли отображать фигуры за сериями/графиками?
До сих пор, у меня есть все, кроме серых линий между кончиками выноски этикеток и верхней решеткой. Я попытался создать линии, используя фигуры, но независимо от установки z-индекса формы всегда появляются поверх баров: 
Возможно ли разместить фигуры за участками? Если нет, есть ли другой способ достичь этого дизайна?
Мой JSON thusfar:
var myConfig = {
"type":"bar",
"labels":[
{
"text":"Zone 1",
"font-size":"13px",
"x":"5%",
"y":"20%",
"height":"15%",
"width":"20%",
"borderWidth":1,
"borderColor":"#ffffff",
"callout":true,
"calloutWidth":0,
"calloutHeight":5,
"calloutTip":{
"type":"circle",
"background-color":"#fff",
"border-width":2,
"border-color":"#35353b",
"size":7,
"shadow":false
}
},
{
"text":"Zone 2",
"font-size":"13px",
"x":"23%",
"y":"20%",
"height":"15%",
"width":"20%",
"borderWidth":1,
"borderColor":"#ffffff",
"callout":true,
"calloutWidth":0,
"calloutHeight":5,
"calloutTip":{
"type":"circle",
"background-color":"#fff",
"border-width":2,
"border-color":"#35353b",
"size":7,
"shadow":false
}
},
{
"text":"Zone 3",
"font-size":"13px",
"x":"40%",
"y":"20%",
"height":"15%",
"width":"20%",
"borderWidth":1,
"borderColor":"#ffffff",
"callout":true,
"calloutWidth":0,
"calloutHeight":5,
"calloutTip":{
"type":"circle",
"background-color":"#fff",
"border-width":2,
"border-color":"#35353b",
"size":7,
"shadow":false
}
},
{
"text":"Zone 4",
"font-size":"13px",
"x":"57%",
"y":"20%",
"height":"15%",
"width":"20%",
"borderWidth":1,
"borderColor":"#ffffff",
"callout":true,
"calloutWidth":0,
"calloutHeight":5,
"calloutTip":{
"type":"circle",
"background-color":"#fff",
"border-width":2,
"border-color":"#35353b",
"size":7,
"shadow":false
}
},
{
"text":"Zone 5",
"font-size":"13px",
"x":"75%",
"y":"20%",
"height":"15%",
"width":"20%",
"borderWidth":1,
"borderColor":"#ffffff",
"callout":true,
"calloutWidth":0,
"calloutHeight":5,
"calloutTip":{
"type":"circle",
"background-color":"#fff",
"border-width":2,
"border-color":"#35353b",
"size":7,
"shadow":false
}
}
],
"shapes":[
{
"type":"line",
"line-color":"#5297b6",
"line-width":2,
"points":[
[
75,
75
],
[
75,
320
]
],
"z-index":1,
"placement":"bottom"
}
],
"font-family":"proxima_nova_rgregular",
"title":{
"text":"MINUTES <b>IN ZONES</b>",
"font-family":"proxima_nova_rgregular",
"background-color":"none",
"font-color":"#39393d",
"font-size":"22px",
"adjustLayout":true,
"height":"175px",
"padding-bottom":"70px"
},
"mediaRules":[
{
maxWidth:564,
"width":"100%"
},
{
"minWidth":565,
"width":"565px"
}
],
"plot":{
"borderRadius":"5px 5px 0 0",
"animation":{
"delay":300,
"effect":11,
"speed":"500",
"method":"0",
"sequence":"3",
"z-index":2
},
"value-box":{
"placement":"top-out",
"text":"%v",
"decimals":0,
"font-color":"#35353b",
"font-size":"14px",
"alpha":1,
"backgroundColor":"#ffffff",
"padding":"5px",
"shadow":false
}
},
"plotarea":{
"border-left":"3px solid #39393d",
"padding-left":"3px",
"margin":"0 0 0 3px",
"background-color":"none"
},
"background-image":"http://www.fitmetrix.io/images/classListZoneChartBg.png",
"background-repeat":"no-repeat",
"background-position":"bottom left",
"scale-x":{
"line-color":"#39393d",
"line-width":3,
"tick":{
"visible":false
},
"guide":{
"visible":false
},
"item":{
"visible":false
}
},
"scale-y":{
"visible":false,
"guide":{
"visible":false
}
},
"series":[
{
"values":[
40
],
"bar-width":"50%",
"background-color":"#cdcccc",
"tooltip":{
"visible":false
},
"z-index":2
},
{
"values":[
15
],
"bar-width":"50%",
"background-color":"#71cbdc",
"tooltip":{
"visible":false
},
"z-index":2
},
{
"values":[
34
],
"bar-width":"50%",
"background-color":"#8cc541",
"tooltip":{
"visible":false
},
"z-index":2
},
{
"values":[
14
],
"bar-width":"50%",
"background-color":"#d96c27",
"tooltip":{
"visible":false
},
"z-index":2
},
{
"values":[
20
],
"bar-width":"50%",
"background-color":"#ea2629",
"tooltip":{
"visible":false
},
"z-index":2
}
]
};
zingchart.render({
\t id: 'myChart',
\t data: myConfig,
\t height: '100%',
\t width: '100%'
});html, body {
\t height:100%;
\t width:100%;
\t margin:0;
\t padding:0;
}
#myChart {
\t height:100%;
\t width:100%;
\t min-height:150px;
}
.zc-ref {
\t display:none;
}<!DOCTYPE html>
<html>
\t <head>
\t <!--Assets will be injected here on compile. Use the assets button above-->
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
\t </head>
\t <body>
\t \t <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
\t </body>
</html>
Если вы попытались эту таблицу, пожалуйста, напишите JSON вы связанный с ним. – nardecky
Я добавил JSON, который я использую в своем оригинальном посте. –