到目前为止,除了标签标注提示和条形顶部之间的灰线外,我还有其他所有内容。我尝试使用形状创建线条,但无论设置z-index,形状总是出现在条形图的顶部:
是否可以在地块后面放置形状?如果没有,还有另一种方法可以实现这种设计吗?
我的JSON因此:
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>
答案 0 :(得分:6)
ZingChart导出功能制作的最终产品图片。只需右键点击图表,然后点击View As PNG
所以简短的回答是两件事:
1)将zone
标签附加到scale-x
,然后使用placement:opposite
将比例移到另一侧。
2)在条形图上方绘制折线图以获得灰线。
绘制线条的好处是,如果需要,可以将动画应用于线条。如果你想拍摄动画,你也可以这样做。该图表通常非常灵敏,这个解决方案有望适合您的用例。
这些行本身遵循一个简单的公式,将每个行值绘制为[barValue + 2, maxScaleYValue]
。
这里唯一的问题是我设置了最大scaleY
值。我这样做的原因是这条线在调整大小时保持一致。如果您要动态更新图表,这不应该是一个问题,因为您也可以更新最大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%'
});
&#13;
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
&#13;
<!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>
&#13;