All geek questions in one place

Is it possible to display figures behind series / graphs?

I am trying to recreate the following with ZingChart: enter image description here

So far, I have everything except the gray lines between the label removal tips and the top of the bars. I tried to create strings using shapes, but regardless of the z-index setting, shapes always appear on top of bars: enter image description here

Is it possible to place figures behind the plots? If not, is there any other way to achieve this design?

My JSON is this way:

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({ 
	id: 'myChart', 
	data: myConfig, 
	height: '100%', 
	width: '100%' 
});
html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
#myChart {
	height:100%;
	width:100%;
	min-height:150px;
}
.zc-ref {
	display:none;
}
<!DOCTYPE html>
<html>
	<head>
	<!--Assets will be injected here on compile. Use the assets button above-->
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
	</body>
</html>
Run codeHide result
+4
source share
1 answer

Image of the final product taken by the ZingChart export function. Just right click on the chart and clickView As PNG

enter image description here

So the short answer is two things:

1) zone scale-x placement:opposite.

2) , .

- , , . , . , , , , , .

, [barValue + 2, maxScaleYValue].

- max scaleY. , , , . , , max scaleY. + 30. - !

, , :

  • .
  • [[]]
  • styles,

var maxYValue = 70;
var value1 = 40;
var value2 = 15;
var value3 = 34;
var value4 = 14;
var value5 = 20;

var myConfig = {
  "type":"mixed",
  "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,
 "padding-bottom": 50
  },
  "plot":{  
 "borderRadius":"5px 5px 0 0",
 "bar-width": '50%',
 "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",
 "border-bottom": "3px solid #39393d",
 "padding-left":"3px",
 "margin":"dynamic",
 "background-color":"none"
  },
  "tooltip": {
"visible": false
  },
  "scale-x":{ 
"placement": "opposite",
 "line-width":0,
 "tick":{  
    "visible":false
 },
 "guide":{  
    "visible":false
 },
 "item":{  
    "visible":false
 },
  },
  "scale-x-2": {

  },
  "scale-y":{  
"max-value": maxYValue,
 "visible":false,
 "line-width":0,
 "guide":{  
    "visible":false
 }
  },
  "series":[  
 {  
    "type": "bar",
    "values":[  
      value1, value2, value3, value4, value5
    ],
    "background-color":"#cdcccc",
    "z-index":2,
    "styles": ['#cdcccc', '#71cbdc', '#8cc541', '#d96c27', '#ea2629']
 },
 {
   "type": "line",
   "line-color": "grey",
   "marker": { "visible": 0},
   "value-box": {visible: 0},
   "values": [
      [0, value1 + 2],
      [0, maxYValue],
      [0, null],
      [1, value2 + 2],
      [1, maxYValue],
      [1,null],
      [2, value3 + 2],
      [2, maxYValue],
      [2,null],
      [3, value4 + 2],
      [3, maxYValue],
      [3,null],
      [4, value5 + 2],
      [4, maxYValue],
      [4,null],
    ]
 }
  ],
  "labels":[  
{  
    "text":"Zone 1",
    "font-size":"13px",
    "borderWidth":1,
    "borderColor":"#ffffff",
    "callout":true,
    "calloutWidth":0,
    "calloutHeight":5,
    'hook': 'scale:name=scale-x,index=0',
    'offset-y': -45,
    "calloutTip":{  
      'offset-y': -35,
      "type":"circle",
      "background-color":"#fff",
      "border-width":2,
      "border-color":"#35353b",
      "size":7,
      "shadow":false
    }
},
{  
    "text":"Zone 2",
    "font-size":"13px",
    "borderWidth":1,
    "borderColor":"#ffffff",
    "callout":true,
    "calloutWidth":0,
    "calloutHeight":5,
    'hook': 'scale:name=scale-x,index=1',
    'offset-y': -45,
    "calloutTip":{  
      'offset-y': -35,
      "type":"circle",
      "background-color":"#fff",
      "border-width":2,
      "border-color":"#35353b",
      "size":7,
      "shadow":false
    }
},
{  
    "text":"Zone 3",
    "font-size":"13px",
    "borderWidth":1,
    "borderColor":"#ffffff",
    "callout":true,
    "calloutWidth":0,
    "calloutHeight":5,
    'hook': 'scale:name=scale-x,index=2',
    'offset-y': -45,
    "calloutTip":{  
      'offset-y': -35,
      "type":"circle",
      "background-color":"#fff",
      "border-width":2,
      "border-color":"#35353b",
      "size":7,
      "shadow":false
    }
},
{  
    "text":"Zone 4",
    "font-size":"13px",
    "borderWidth":1,
    "borderColor":"#ffffff",
    "callout":true,
    "calloutWidth":0,
    "calloutHeight":5,
    'hook': 'scale:name=scale-x,index=3',
    'offset-y': -45,
    "calloutTip":{  
      'offset-y': -35,
      "type":"circle",
      "background-color":"#fff",
      "border-width":2,
      "border-color":"#35353b",
      "size":7,
      "shadow":false
    }
},
 {  
    "text":"Zone 5",
    "font-size":"13px",
    "borderWidth":1,
    "borderColor":"#ffffff",
    "callout":true,
    "calloutWidth":0,
    "calloutHeight":5,
    'hook': 'scale:name=scale-x,index=4',
    'offset-y': -45,
    "calloutTip":{  
      'offset-y': -35,
       "type":"circle",
       "background-color":"#fff",
       "border-width":2,
       "border-color":"#35353b",
       "size":7,
       "shadow":false
    }
 }
  ],
};

zingchart.render({ 
id: 'myChart', 
data: myConfig, 
height: '100%', 
width: '100%' 
});
html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
#myChart {
	height:100%;
	width:100%;
	min-height:150px;
}
.zc-ref {
	display:none;
}
<!DOCTYPE html>
<html>
	<head>
	<!--Assets will be injected here on compile. Use the assets button above-->
		<script src= 'https://cdn.zingchart.com/zingchart.min.js'></script>

	<!--Inject End-->
	</head>
	<body>
		<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
	</body>
</html>
Hide result
+6

Source: https://habr.com/ru/post/1664558/

More articles:


All Articles