如何在不滚动的情况下使一个精彩的图表在容器内完全响应

在我的网页中，我在不同的容器中显示zing图表。我动态设置容器的高度和宽度。容器的宽度将是页面宽度的48%或96%，而高度来自后端(由用户自定义)。

在容器内部，我显示了头部和面包屑，它们占用了容器的一些高度(大约50px)。我需要用剩下的区域来绘制zing图表。

所以我尝试了两种方法：

渲染zing图表时，将高度和宽度设置为100%。在这种情况下，我需要为容器或zing图表设置滚动，以使我的图表正确。卷轴不应该存在。所以我不得不放弃这个。

我尝试的另一种方法是用50px减去容器的高度(如上文第2段第2行所述，它是页眉和面包屑占用的空间)，并在渲染时为图表设置该高度。这似乎在某些情况下失败了，因为图表似乎太小了。我正在分享代码片段和它失败的场景。

这是我用来设置垂直条形图的配置。

var vBarConfig = {
"type": "vbar"
, "legend": {
toggleAction: 'none'
, "marker": {
"cursor": "hand"
}
, "item": {
"cursor": "hand"
}
, "border-color": "none"
, "align": "center"
, "vertical-align": "bottom"  
, "max-items": 4
, "overflow": "page"
, "page-on": {
"background-color": "black"
, "border-width": 1
, "border-color": "black"
}
, "page-off": {
"background-color": "#ffe6e6"
, "border-width": 1
, "border-color": "black"
}
, "page-status": {
"font-color": "black"
, "font-size": 11
, "font-family": "Georgia"
, "background-color": "#ffe6e6"
, }
}
, "plotarea": {
"margin-bottom": "35%"
, "margin-top": "15%"
, "border-top": "1px solid grey"
, "border-right": "1px solid grey"
}
, "scale-x": {
"labels": categoryVbarName
, "auto-fit": true
, "line-width": 1
, "items-overlap": true
, "item": {
"angle": 0
, "wrap-text": true
}
}
, "scale-y": {
"values": scaleValue
, "ref-value": refMarkerPosition
, "ref-line": {
"visible": true
, "line-color": refMarkerColor
, "line-width": refMarkerWidth
, "line-style": "solid"
, "items-overlap": true
}
, "guide": {
"line-style": "solid"
}
}
, "plot": {
"tooltip": {
"rules": $scope.tooltipVbarRules
}
, "value-box": {
"text": "%vt "
, "visible": true
, "font-color": "black"
, "font-size": "10px"
, "decimals": 2
, "angle": -90
, "placement": "middle"
}
, "animation": {
"effect": "ANIMATION_SLIDE_BOTTOM"
, "speed": "2000"
}
}
, "series": vbarData
}
/* Getting the height of the container */
var height=$('#'+contentName+'TH').height();
height=height-50;
zingchart.render({
id: contentName
, data: vBarConfig
, height:height
, width: '100%'
, defaults: commonSettings
});

有没有其他方法可以让zing图表在我的容器场景中动态？还是我做错了什么？示例场景：在调用渲染函数之前，我正在设置容器的高度。正如我所说的，我已经使用了100%的宽度和100%的高度。要在其中生成图表的容器具有48%的宽度和高度"300px"。图表和面包屑的标题采用容器高度的"50px"。现在我们只剩下"250px"的高度来绘制图表。当我们将图表的高度呈现值设置为"100%"时，它采用"300px"的"100%"。这不应该发生，因为它将为容器创建滚动。我希望图表在250像素的空间内构建。(无滚动)

要使ZingChart响应，必须在render方法中将height和width设置为100%。这不是你所要做的全部。你必须更新你的CSS容器，使其具有min-height或固定的height才能查看图表渲染。由于SVG被注入到DOM中，如果容器没有内容(在图之前)，则在这种情况下，它将以0px的高度呈现。

以下是以响应方式配置的一般图表：

演示链接

var vBarConfig = {
"type":"vbar",
"legend":{
"marker":{
"cursor":"hand"
},
"item":{
"cursor":"hand"
},
"border-color":"none",
"align":"center",
"vertical-align":"bottom",
"max-items":4,
"overflow":"page",
"page-on":{
"background-color":"black",
"border-width":1,
"border-color":"black"
},
"page-off":{
"background-color":"#ffe6e6",
"border-width":1,
"border-color":"black"
},
"page-status":{
"font-color":"black",
"font-size":11,
"font-family":"Georgia",
"background-color":"#ffe6e6"
},
"toggle-action":"none"
},
"plotarea":{
"margin": "dynamic",
"border-top":"1px solid grey",
"border-right":"1px solid grey"
},
"scale-x":{
"auto-fit":true,
"line-width":1,
"items-overlap":true,
"item":{
"angle":0,
"wrap-text":true
}
},
"scale-y":{
"ref-line":{
"visible":true,
"line-style":"solid",
"items-overlap":true
},
"guide":{
"line-style":"solid"
}
},
"plot":{
"value-box":{
"text":"%vt ",
"visible":true,
"font-color":"black",
"font-size":"10px",
"decimals":2,
"angle":-90,
"placement":"middle"
},
"animation":{
"effect":"ANIMATION_SLIDE_BOTTOM",
"speed":"2000"
}
},
"series":[
{
"values":[5,15,10,6,4]
}
]
};
zingchart.render({ 
	id: 'myChart', 
	data: vBarConfig, 
	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>
		<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>

相关内容

最新更新

热门标签：