charts - 是否可以在系列/绘图后面显示形状？

Question

我正在尝试使用 ZingChart 重新创建以下内容:


到目前为止，除了标签标注提示和条形顶部之间的灰线之外，我拥有所有内容。我尝试使用形状创建线条，但无论设置 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>

Answer 1

ZingChart 导出功能制作的最终产品图像。只需右键单击图表并点击 View As PNG


所以简短的回答是两件事:

1) 附上 zone标签到 scale-x并使用 placement:opposite 将刻度移到另一侧.

2)在条形上方绘制折线图以获得灰线。

绘制线条的好处是您可以根据需要对线条应用动画。如果你想取消动画，你也可以这样做。该图通常非常敏感，该解决方案有望适合您的用例。

线条本身遵循一个简单的公式，将每个线条值绘制为 [barValue + 2, maxScaleYValue] .

这里唯一的问题是我设置了一个最大值 scaleY值(value)。我这样做的原因是为了让这条线在整个调整大小过程中保持一致。如果您正在动态更新图表，这应该不是问题，因为您可以更新最大值 scaleY值(value)也是如此。只需对您的条形值数组进行排序并选择最高值 + 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>